将父级<div>扩展到其子级的高度

斯丁2020-03-23

我有一个类似于此的页面结构：

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

我希望父项在内部的增加时div扩展。heightdivheight

编辑：
一个问题是，如果width子内容的扩展width到浏览器窗口的之外，则我当前的CSS在父对象上放置了一个水平滚动条div。我希望滚动条位于页面级别。目前，我的父div设置为overflow: auto;

您能帮我用CSS吗？

小卤蛋JinJin2020/03/23 14:55:30

下面的代码为我工作。

的CSS

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

神奇Jim2020/03/23 14:55:30

如果您在#childRightCol和#childRightCol中的内容向左或向右浮动，只需将其添加到CSS中：

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

卡卡西2020/03/23 14:55:30

此功能按规范描述运行-此处的几个答案是有效的，并且与以下内容一致：

如果它具有块级子级，则高度是没有边缘通过其折叠的最上层块级子级框的顶部边界边缘与最底部块级子级框的底部边界边缘之间的距离没有任何利润率下降。但是，如果元素的顶部填充和/或顶部边框非零，或者是根元素，则内容从最顶层子元素的顶部边缘开始。（第一种情况表示，元素的顶部和底部边距与最顶部和最底端的子项的顶部边距折叠在一起，而在第二种情况下，填充/边框的存在可防止顶部边距折叠。）类似地，如果元素的底部填充和/或底部边框非零，则内容在最底部子元素的底部边缘处结束。

从这里开始：https : //www.w3.org/TR/css3-box/#blockwidth

老丝2020/03/23 14:55:30

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

小胖2020/03/23 14:55:30

这是您想要的吗？

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

樱2020/03/23 14:55:30

我通过将子div作为没有任何定位属性（例如，absolute）指定的单列，使子div围绕子div的内容扩展。

例：

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

基于maincolumn div是#wrap的最深子div，它定义了#wrap div的深度，并且两侧的200px填充创建了两个大的空白列，供您随意放置绝对定位的div。您甚至可以使用position：absolute更改顶部和底部的填充以放置页眉div和页脚div。

小小猿村村2020/03/23 14:55:30

您是否在寻找2列CSS布局？

如果是这样，请查看说明，这非常容易入门。

Mandy村村2020/03/23 14:55:29

加

clear:both;

在父div的CSS上，或在父div底部添加一个清除的div：

这是正确的答案，因为overflow：auto; 可能适用于简单的网页布局，但会与开始使用负边距等元素的元素混淆

JinJin阿飞番长2020/03/23 14:55:29

使用类似的自净div非常适合像的情况这样。然后，您只需在父类上使用一个类即可...

<div id="parent" class="clearfix">

宝儿AA2020/03/23 14:55:29

正如詹斯在评论中所说

另一个答案是如何使div不大于其内容？…并建议设置display：inline-block。这对我来说很棒。–詹斯6月2日5:41

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

2020/03/23 14:55:29

对于那些无法在此答案中的说明中找到答案的人：

尝试设置填充值更多的则0，如果孩子的div有边距或下边距你可以用填充替换

例如，如果您有

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

最好将其替换为：

#parent
{
    padding: 30px 0px 20px 0px;
}

樱小胖Mandy2020/03/23 14:55:29

尝试付出max-content父母的身高。

.parent{
   height: max-content;
}

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

乐2020/03/23 14:55:29

添加一个clear:both。假设您的列是浮动的。取决于您指定父母身高的方式，您可能需要溢出：

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

神无达蒙JinJin2020/03/23 14:55:29

尝试为父母，这对我有用。