DIVの高さと動的に等しくする方法

Question

レイアウトに2つの列があります。メインコンテンツとサイドバー。主なコンテンツが増えている場合、サイドバーは自動的に高さを調整する必要があります。そして私はこれを達成したいと思います。ここで

はサンプルコードです：http://jsfiddle.net/SZ7y9/4/

私はあまりにもIE6の修正を取得する場合、それは素晴らしいことだろう。私はのどの列が仕事だと思う

Answer 1

フェイク列は良いのですが、あなたは純粋なCSSのバージョンたい場合 - あなたは隠しに設定され、オーバーフローを使用してコンテナを上に設定http://jsfiddle.net/spacebeers/s8uLG/3/

を、各アドオンDIV負のマージンボトムと等しい正のパッディングボトム。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

EDIT：あなたはそれラウンド国境をしたい場合は、この例を見ている - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Answer 2

：http://www.alistapart.com/articles/fauxcolumns/

Answer 3

を私は、これは万回を必要と見てきました。一般的に、私が何をしようこれです：

Fiddle

基本的には、サイドバーの背景色で、そこに内側容器を入れ、透明にサイドバーを設定します。次に、樋の中に背景が表示されるようにするには、メインコンテンツエリアに境界線を置いて、一種の人工樋を取得します。

警告：メインコンテンツ領域はサイドバーよりも長くする必要があります。または、「ガター」はメインコンテンツ領域のように遠くまでしか表示されません。私は、主コンテンツ領域の最小の高さを設定することでこれを一般的に「修正」します。