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

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

像这样在#container 上使用min-height：

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