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

308

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

<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吗？

html  css 
— 史蒂夫·霍恩
source
6
您是否在浮动内部div？您可以发布当前的CSS吗？
— 埃里克（Eric）2010年
2
@Eric-这也是我的问题-我的孩子div有float：left，当我将其删除时，“父母”会自动被识别并伸展到最大高度！
— Michael Goltsman '16

Answers:

539

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

overflow:auto;

更新：

一种有效的解决方案：

家长：

display: table;

小孩：

display: table-row;
— 卡斯珀·布莱克博士
source
67
overflow:auto表示浏览器应决定要应用哪个值。真正做的伎俩是overflow: overlay。
— 阿尔巴·门德斯
14
@jmendeth不存在称为“覆盖”的溢出值。如果子div浮动，那该做什么呢overflow:hidden？
— Christoph
16
哇！放松。一件事是overlayWebkit外部不支持。另一个完全不同的是，它根本不存在。请先RTFM。;）
— 阿尔巴·门德斯
6
如果仅在Webkit上，则仅存在20％：P为链接欢呼，以前从未见过此网站。维护和更新是否良好？你发誓吗？
— pilau
20
一个替代答案是stackoverflow.com/questions/450903/…，它建议设置display:inline-block。这对我来说很棒。
— 詹斯（Jens）2013年
26

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

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
— 本迪威
source
当内容比浏览器窗口宽时，这样做使我在父div上有了一个水平滚动条。我希望水平滚动显示在整个页面上。
— 史蒂夫·霍恩
1
为什么需要overflow：auto ;？在我的测试中，clear：both; 足够。
— Paolo Bergantino，
3
这也假设父级没有指定高度。
— bentewey
这种方法在Firefox中效果很好，但在IE 6中不起作用。有任何解决方法吗？
— 史蒂夫·霍恩
16

正如詹斯在评论中所说

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

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

— 吵
source
4

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

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

例如，如果您有

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

最好将其替换为：

#parent
{
    padding: 30px 0px 20px 0px;
}
— y
source
4

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

<div id="parent" class="clearfix">
— 蒂姆·奈特
source
3

加 

clear:both;

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

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

— 网络营销博伊西
source
2

这是您想要的吗？

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
— 埃里克
source
1

我通过将子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。

— 伊恩
source
0

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

— 尼基尔
source
0

如果您在#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; }
— 用户名
source
0

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

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

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

— 亚当·托利
source
0

下面的代码为我工作。

的CSS

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
— 第505节
source
0 

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}
展开摘要

— YourBestBet
source
0

我们从哪里开始

这是一些样板HTML和CSS。在我们的示例中，我们有一个带有两个浮动子元素的父元素。

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
展开摘要

解决方案＃1：溢出：自动

在所有现代浏览器中以及在IE8和IE8中均可使用的解决方案是将其添加overflow: auto到父元素。在IE7中，添加滚动条也可以使用。

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
展开摘要

解决方案2：浮动父容器

适用于所有现代浏览器并返回IE7的另一种解决方案是浮动父容器。

这可能并不总是可行的，因为浮动父div可能会影响页面布局的其他部分。

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
展开摘要

方法3：在浮动元素下添加Clearing Div

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
展开摘要

方法4：向父元素添加Clearing Div 此解决方案对于较旧的浏览器和较新的浏览器都非常安全。

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
展开摘要

来自https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

— jafar690
source
-1

我使用此CSS做父母，并且可以正常工作：

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
— 佩杰曼
source
2
您使用的是最小高度，因此不计算在内；）
— pilau
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
展开摘要

您通过使用overflow:hidden;CSS中的属性进行管理

— chintan kotadiya
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.