Merhaba arkadaşlar.

3 Kolonlu bir tasarım tasarladım.
Sol Kolon sabit (fixed) orta kolon ve sağ kolon birlikte aşağı yukarı oynayacak şekilde.

Stil Kodlarım ve html kodlarım aşağıdaki şekilde. Bu şekilde olduğunda orta kısım aşağı doğru indikçe sağ kolon yüksekliği 100% olmuyor . Yani arkaplan beyaz şeklinde.



#orta height: 100% yaptığımda scrool çıkmıyor aşağı inmiyor ortadaki yazı kısmı. Bende height: auto yapmayı denedim ama bu seferde sağ kısım arka planı beyaz kalıyor.

Bu sorunu nasıl çözebilirim?

Demo: Merhaba arkadaşlar.

3 Kolonlu bir tasarım tasarladım.
Sol Kolon sabit (fixed) orta kolon ve sağ kolon birlikte aşağı yukarı oynayacak şekilde.

Stil Kodlarım ve html kodlarım aşağıdaki şekilde. Bu şekilde olduğunda orta kısım aşağı doğru indikçe sağ kolon yüksekliği 100% olmuyor . Yani arkaplan beyaz şeklinde.

Orta kısımdaki içerik aşağı indikçe sol kısımda insin beyazlık kalmasın istiyorum.

Yardımcı olabilir misiniz?

Demo: www.hgtucel.com/kolon.html

<style>
    html,body {
      height: 100%;
      margin: 0;
    }
    #sol {
      float: left;
      width: 25%;
      height: 100%;
      background: #000;
      position: fixed;
      left: 0;
      overflow: hidden;
    }
  
    #orta {
      float: left;
      position: absolute;
      left: 25%;
      width: 50%;
      height: auto;
      min-height: 100%;
      background: #333;
      overflow: hidden;
    }
    #sag {
      float: left;
      position: absolute;
      left: 75%;
      right: 0;
      width: 25%;
      height: auto;
      min-height: 100%;
      background: #222;
      overflow: hidden;
    }
  </style>

<div id="sol">
  SOL
</div>


<div id="genel">
  <div id="orta">
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />
    ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />ORTA<br />
    BAŞKA
  </div>

  <div id="sag">
   SAĞ
  </div>
</div>