我有一个类似这样的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
我想为父div扩大高度时，内部div的高度增加。
编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;
你能帮我做这个的CSS吗?
当前回答
Add
clear:both;
添加到父div的css中，或者在父div的底部添加一个div，即清除:both;
这是正确答案，因为overflow:auto;可能工作于简单的网页布局，但会混乱的元素开始使用的东西，如负边距等
其他回答
Add
clear:both;
添加到父div的css中，或者在父div的底部添加一个div，即清除:both;
这是正确答案，因为overflow:auto;可能工作于简单的网页布局，但会混乱的元素开始使用的东西，如负边距等
对于那些不能从这个答案中找到答案的人:
尝试设置填充值大于0，如果子div有margin-top或margin-bottom，你可以用填充替换它
例如，如果你有
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
最好将其替换为:
#parent
{
padding: 30px 0px 20px 0px;
}
试试这个方法，对我很管用。
overflow:auto;
更新:
还有一个有效的解决方案:
家长:
display: table;
孩子:
display: table-row;
我使用这个CSS来父，它工作:
min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
下面的代码对我有用。
css
.parent{
overflow: auto;
}
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
