Question

我有div我要设置的高度与父div高度相同。这就是我想要的：Jpg example

这是示例代码：

<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.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 */

只需确保为要应用此高度的任何元素指定公共类。您也可以使用jQuery来实现相同的目的，如果我需要确保它们以编程方式具有相同的高度，我就是这样做的。

选择直系孩子：

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

或所有孩子：

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

将子div扩展为父级的高度？

1 个答案: