我有一个类似这样的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
我想为父div扩大高度时，内部div的高度增加。
编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;
你能帮我做这个的CSS吗?
当前回答
使用height: auto或在父元素上使用min-height都可以。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box或在父元素上使用overflow: hidden来避免由于填充或边框而导致的水平滚动条。 至于水平滚动条由于宽度的身体，如果你是使用宽度:100vw代替宽度:100%。
其他回答
试着给父母的高度max-content。
.parent{
height: max-content;
}
https://jsfiddle.net/FreeS/so4L83wu/5/
对于那些不能从这个答案中找到答案的人:
尝试设置填充值大于0，如果子div有margin-top或margin-bottom，你可以用填充替换它
例如，如果你有
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
最好将其替换为:
#parent
{
padding: 30px 0px 20px 0px;
}
使用像自清除div这样的东西非常适合这种情况。然后你只需在父类上使用一个类…如:
<div id="parent" class="clearfix">
正如Jens在评论中所说
另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41
这对我来说在所有浏览器中都更好。
您必须在父容器上应用clearfix解决方案。这里有一篇很好的文章解释了修复链接
