嵌套div的流体高度 [英] fluid height for nested div

问题描述

我试图让绿色div的高度在蓝色div中添加内容时变得流畅，红色div的功能不像绿色。所以我希望绿色div在向Blu div添加内容时与红色一样流畅。
以下是代码 http://jsbin.com/ivobav/1/edit

解决方案

首先，如果你想要绿色div上的流体高度，你需要从CSS中删除 height：90％。您会注意到这会让您的绿色div消失（因为它没有相对定位的内容）。

如果您在绿色div中键入内容，您会注意到它增长。现在，我假设你想要红色的div嵌套在绿色的div中。为了做到这一点，你需要删除红色div上的绝对位置。

如果你这样做，红色的div现在消失了。那是因为蓝色的div在它内部浮动，这意味着它不会成长为蓝色div。因此，只需将 overflow：auto; 添加到红色div并且您应该得到您想要的。

查看结果这里：

http://jsbin.com/ ivobav / 5 /编辑

I am trying to make the green div's height to be fluid when adding content in the blue div, the red div work as spected but not the green one.

So I want the green div to be as fluid as the red one when adding content to the blu div. Here is the code http://jsbin.com/ivobav/1/edit

解决方案

Well you have multiple things at play here. First, if you want a fluid height on green div, you need to remove height: 90% from the CSS. You will notice this will make your green div disappear (because it has no relative positioned content in it).

If you type something in the green div, you will notice it grows. Now, I am assuming you want the red div to nest inside the green div. In order to do this, you need to remove the absolute positioning on the red div.

If you do this, the red div now disappears. That is because the blue div is floated inside of it, meaning it will not grow to hold the blue div. So simply add overflow: auto; to the red div and you should get what you want.

See the results here:

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

这篇关于嵌套div的流体高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！