3 Kolonlu Tasarım Sağ Kısım Hata

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>

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

<script>
if( $("#orta").outerHeight() > $("#sag").outerHeight() ){
	$("#sag").css("height",$("#orta").outerHeight()+"px");
}else{
	$("#orta").css("height",$("#sag").outerHeight()+"px");
}
</script>

jquery kullanıyosanız bu işinizi görür ama #genel'i fixed yapıp height:100%; yapmak muhtemelen daha pratik olur. Mevcut css tanımlarına göre #genel'in yüksekliği 0px olduğu için #orta ve #sag'a verilen "min-height:100%;" tanımı anlamsız kalmış.

Edit:
pardon ya #genel'de relative falan yok çözüm önerim yanlış olmuş ama şu an aklıma gelmeyen daha pratik bi yok bulunabilir yine de.

Kolay gelsin

Ilgine teşekkürler. Sorunu halen çözebilmiş değilim. :/

Neden çözebilmiş değilsin jquery koları denemedin mi?