将父节点<div>展开到其子节点的高度

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

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

我想为父div扩大高度时，内部div的高度增加。

编辑: 一个问题是，如果子内容的宽度扩展超过浏览器窗口的宽度，我目前的CSS把一个水平滚动条上的父div。我希望滚动条是在页面级别。目前我的父div被设置为溢出:auto;

你能帮我做这个的CSS吗?

当前回答

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

2013-07-13 03:49:16

其他回答

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

.parent{
  height: max-content;
}

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

2018-09-11 09:43:07

加一个明确的:两者。假设你的列是浮动的。根据你的高度是如何指定的，你可能需要一个overflow:auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

2008-12-21 05:47:37

使用height: auto或在父元素上使用min-height都可以。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box或在父元素上使用overflow: hidden来避免由于填充或边框而导致的水平滚动条。至于水平滚动条由于宽度的身体，如果你是使用宽度:100vw代替宽度:100%。

2021-05-31 12:40:07

试试这个方法，对我很管用。