嵌套div的流体高度

Question

我试图在蓝色div中添加内容时使绿色div的高度变得流畅，红色div工作为spected但不是绿色div。

所以我希望绿色div在向blu div添加内容时与红色div一样流畅。 这是代码http://jsbin.com/ivobav/1/edit

Answer 1

嗯，你在这里玩的有很多东西。首先，如果您想在绿色div上使用流体高度，则需要从CSS中删除height: 90%。你会注意到这将使你的绿色div消失（因为它没有相对定位的内容）。

如果您在绿色div中键入内容，您会注意到它在增长。现在，我假设您希望红色div嵌入绿色div中。为此，您需要删除红色div上的绝对定位。

如果你这样做，红色div现在消失了。那是因为蓝色div在它内部漂浮，这意味着它不会长大以容纳蓝色div。所以，只需将overflow: auto;添加到红色div中即可获得所需内容。

在此处查看结果：

http://jsbin.com/ivobav/5/edit

Answer 2

这是因为父母不伸展以适应他们的浮孩子。要解决此问题，您可以：

• 不使用花车
• 插入等效的<div style="clear:both"></div>作为父容器中的最后一个元素
• 在父
中有其他非浮动内容

修改：有关更全面的说明，请查看http://www.quirksmode.org/css/clearing.html。迈克的答案是最好的方法，但遗憾的是它并不适用于所有场合。请注意，虽然这似乎是人们试图提出解决方案的问题，但实际上并不是一个错误，但有人会引入一些新的标准CSS属性来使元素伸展以适应它的浮动。