CSS - 绝对定位的子项不会调整父级的大小

Question

我有一个带有绝对定位菜单的页面（因为它需要在某个地方，不管它下面有什么）。如何调整页面大小以包含菜单？ 我已经制作了example of the problem on jsFiddle，虽然没有使用Javascript，但我不想使用它。

什么，我需要包含代码？很好......关于jsFiddle的更好的例子

#container {float: left; width: 500px;}
#content {float: right; width: 300px; height: 100px;}
#menu {position: absolute; width: 100px; height: 350px;}

<div id="container">
    <div id="content">Content</div>
    <div id="menu">Menu</div>
</div>

Answer 1

由于您在菜单上使用绝对定位，因此不会影响父容器的高度。

在min-height上使用#container，如下所示：

#container {
    background: #ff00ff;
    float: left;
    width: 500px;
    padding: 10px;
    min-height: 350px;
}