我有一个类似这样的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
我想为父div扩大高度时，内部div的高度增加。
编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;
你能帮我做这个的CSS吗?
当前回答
这是你想要的吗?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
其他回答
正如Jens在评论中所说
另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41
这对我来说在所有浏览器中都更好。
加一个明确的:两者。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
下面的代码对我有用。
css
.parent{
overflow: auto;
}
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
试试这个方法，对我很管用。
overflow:auto;
更新:
还有一个有效的解决方案:
家长:
display: table;
孩子:
display: table-row;
与其设置height属性，不如使用min-height。
