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

The "One True Layout" method is my favorite when it comes to pure CSS...oldy but a goody http://www.positioniseverything.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 */

Just make sure you assign a common class to any elements you want this height applied to. You could also use jQuery to achieve the same end, which is how I do it if I need to make sure they are the same height programmatically.

To select immediate children:

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

Or all children:

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