html - 子 div を親の高さに拡張しますか?

Question

親divの高さと同じ高さを設定したいdivがあります。これは私が欲しいものです: jpg の例

これはコード例です:

<div id="parent">
<div id="header">111</div>
<div id="menu">222</div>
<div id="content">333</div>
</div>

親の高さ: 100%。メニュー div (灰色の部分) を画面の下部まで拡大したい。

Answer 1

純粋なCSSに関しては、「One True Layout」メソッドが私のお気に入りです...古いですが、良い http://www.positioniseeverything.net/articles/onetruelayout/print.html

#one-true { overflow: hidden; }
#one-true .col {
      width: 50%; //or whatever
      padding: 30px 10% 0; //or whatever
      float: left; 
      margin-bottom: -99999px; //important!
      padding-bottom: 99999px; //important!
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

この高さを適用するすべての要素に共通のクラスを割り当てるようにしてください。jQuery を使用して同じ目的を達成することもできます。これは、プログラムで同じ高さであることを確認する必要がある場合に行う方法です。

直接の子を選択するには:

$('#parent > div').height($('.col').height());

またはすべての子:

$('.col').children('*').height($('.col').height()); // be careful with borders and padding!