%のための事業部の高さの修正に基づく列

Question

私は私がアドレスを次のように開始しましたWebページを持っている：http://digitalgenesis.com.au/my%20sites/Digital%20Genesis/

は基本的に均等にフッターにダウン背景色を表示する2つの流体コンテナと2列レイアウトの後にイム。

しかし、現在のところ、左側の列には、テキストのまわりに背景が表示されます。 2列とそれを含むdivのためのコードは、私が

は、私だけに頼るべきページの赤い背景全長を表示し、左側の列を得ることができる方法についての困惑

#container{ 
overflow: hidden; 
width: 100%; 
} 

#col1{ 
float: left; 
width: 60%; 
background:red; 
} 

#col2{ 
float: left; 
width:40%; 
background:blue; 
} 

の下に記載されていますそれを簡単にする固定幅のサイドバー？

Answer 1

see this example on jsFiddle。このアプローチは、背景とコンテンツを別々に扱うことで機能します。これは、各列の絶対位置のバックグラウンドdivを導入します。バックグラウンドは、フローティングされたコンテンツの背後にパーセンテージを使用して配置され、親コンテナの高さを満たす大きさになっています。

注：私の例がjsFiddleでホストされているにもかかわらず、この方法は、任意のJavaScriptを必要としません。それはCSSのみを使用します。

Answer 2

Faux Columnsは、価値のある技術です。

個人的に私はjavascriptを使用することを選択しました。

$.fn.equalHeights = function(px) { 
    $(this).each(function(){ 
      var currentTallest = 0; 
      $(this).children().each(function(i){ 
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 
      }); 
      if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
      // for ie6, set height since min-height isn't supported 
      if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } 
      $(this).children().css({'min-height': currentTallest}); 
    }); 
    return this; 
}; 

$（ '。等しい高さ'）。equalHeights（）;

同等の高さの95％の互換性は、私にとっては時間の大部分を占めるのに十分です。そうでなければ、私は偽の列を使用します。私はこの問題は、ブラウザが追いついたときにHTML5/CSS3で完全に消滅するはずだと考えています。