layout - 2个div，调整顶部保持底部固定高度

Question

我在stackoverflow周围进行了搜索，但找不到答案。这是问题所在：

我有两个 div，一个在另一个之上。我想让顶部 div 根据下面 div 的高度来调整高度。

<div id="parent" style="height:300px">
   <div id="div1" style="height:auto"></div>
   <div id="div2" style="height:45px"></div>
</div>

这是因为我打算显示/隐藏底部 div 并且顶部 div 必须调整大小以填充父 div。

我忘了提到第一个 div（需要适应的那个）有很长的内容溢出：滚动

你能帮我吗？

谢谢

Answer 1

为此，您可以显示：table属性。像这样写：

#parent{
 display:table;
 height:300px;
 width:100%;
}
#parent > div{
    display:table-row;
}
#div1{
    background:red;
}
#div2{
    background:green;
    height:45px;
}

检查这个http://jsfiddle.net/7NuFr/