【发布时间】：2014-11-16 14:07:15
【问题描述】：
我在父 div 中有 3 个浮动 div。第一个和最后一个 div 有一些固定的高度（例如：100px 和 150px）。对于第二个 div，我将高度设置为 100%。但是第二个 div 的高度并没有随着父级高度的增加而增加。
HTML
<div class="main">
<div class="one">1</div>
<div class="two"></div>
<div class="three">3</div>
<br style="clear: both" />
</div>
CSS
body, html {
height: 100%;
}
.main {
width: 500px;
}
.one, .two, .three {
float: left;
width: 150px;
border: 1px solid #CCC;
margin-left: 5px;
}
.one {
height: 100px;
}
.two {
height: 100%;
}
.three {
height: 150px;
}
【问题讨论】：
-
“但是第二个 div 的高度没有随着父级高度的增加而增加” – 父级的高度没有增加，它保持在0 像素——因为子元素是浮动的；这是漂浮的基本效果之一。即使你解决了这个问题，100% 也不会起作用——因为父级的高度取决于其子级的高度，这是第 22 个问题。这只有在你给父级明确的高度（或使用完全不同的方法）。