100％の高さのCSS

Question

私はコンテナのdivで入れ子になっている3つのdivを並べています。それぞれのdivはさまざまなページに異なる内容を持つので、divの高さに最も近い内容で伸びるように入れ子divをそれぞれ必要とします。私は 'height：100％'と 'height：auto'を使ってみましたが、どちらもうまくいかないようです。誰でも私を助けたり、正しい方向に私を指差してください。私のHTMLは：

<div id="container"> 
    <div id="column1"></div> 
    <div id="column2"></div> 
    <div id="column3"></div> 
</div> 

事前に感謝します。すべての3つの内側のdivに

Answer 1

使用display: table-cell：

#container div { display: table-cell; } 

はここWorking Example.

Answer 2

あなたはjQueryのを使用することはできますか？

そうしようとした場合：http://jsfiddle.net/Rnf82/2/

{表示：テーブルのセル;}に問題が真実の答えは最高ですが、それはIE

Answer 3

の古いバージョンでサポートされていないということです、certain browsers（通常の容疑者）は、table-cellを正しく実装していません。

解決策全体の解決策は、過度に大きな垂直パディングと逆余白を割り当てることです。たとえば、次のように

<div class="container"> 
    <div class="column" style="background: #cc0000;">blah</div> 
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div> 
    <div class="column" style="background: #0000cc;">blah<br />blah</div> 
</div> 

とCSS：[？CSS - 同じ高さの列]の

.container { 
    width: 300px; 
    height: auto; 
    overflow: auto; 
} 

.container div.column { 
    float: left; 
    width: 100px; 
    height: auto; 
    padding: 0 0 1000px 0; 
    margin: 0 0 -1000px 0; 
}