我有一个类似这样的页面结构:

<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;可能工作于简单的网页布局,但会混乱的元素开始使用的东西,如负边距等

其他回答

试着给父母的高度max-content。

.parent{
  height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

您必须在父容器上应用clearfix解决方案。这里有一篇很好的文章解释了修复链接

正如Jens在评论中所说

另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41

这对我来说在所有浏览器中都更好。

Add

clear:both; 

添加到父div的css中,或者在父div的底部添加一个div,即清除:both;

这是正确答案,因为overflow:auto;可能工作于简单的网页布局,但会混乱的元素开始使用的东西,如负边距等

# childRightCol { 浮:正确; } # childLeftCol { 浮:左; } #父 { 显示:内联; }