logo标签列表

扩展父级<div>元素以匹配其子元素的高度

htmlcss
387

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

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

我希望当内部的子元素 div 的高度增加时，父级 div 也会随之扩展高度。

编辑:
问题在于，如果子元素内容的 width 扩展超过浏览器窗口的 width，那么我的当前CSS会在父级 div 上放置一个水平滚动条。我希望滚动条出现在页面上。目前，我的父级 div 设置为 overflow: auto;

你能帮我解决这个CSS问题吗?

7
你是否对内部div元素进行了浮动？能否发布当前的CSS代码？ - Eric
2
@Eric - 这也是我的问题 - 我的子div使用了float:left，当我将其删除后，“父级”自动被识别并拉伸到完整高度！ - Michael Goltsman
20个回答
620

尝试这个针对父元素的方法，这对我有效。

overflow:auto;

更新：

另一个可行的解决方案：

父元素：

display: table;

子元素:

display: table-row;
76
overflow:auto 的意思是浏览器应该决定应用哪个值。真正有用的是 overflow: overlay。 - Alba Mendez
16
如果子 div 元素使用了浮动，声明 overflow: hidden 就可以解决问题。但是，名为“overlay”的溢出值并不存在。 - Christoph
17
等一下，放松。一个是声称overlay在Webkit之外不受支持，另一个完全不同的是说它根本不存在。请先看说明文档。;) - Alba Mendez
7
如果只在Webkit上，那么它只有20%的存在:P 感谢你提供链接，我以前从未见过这个网站。它是否得到良好的维护和更新？你对它有信心吗？ - pilau
23
另一种答案是https://dev59.com/OHRB5IYBdhLWcg3w9b99，它建议设置 display:inline-block。这对我非常有效。 - Jens
69
该属性在其他浏览器中的表现如何？ 在MDN上：https://developer.mozilla.org/zh-CN/docs/Web/CSS/height#Browser_compatibility - rmolinamir
这似乎是唯一可以解决 Safari 12 中问题的方法。 - Ben Wheeler
这个能用于 iframe 的容器吗？我是为了一个朋友感兴趣。 - Jeremy
27

如果您的列是浮动的，则添加clear:both。根据父元素指定高度的方式可能需要添加overflow:auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
这样做会在父级div上产生水平滚动条，当内容宽度超过浏览器窗口时。我希望整个页面都有水平滚动条。 - Steve Horn
1
为什么需要overflow:auto;？在我的测试中，clear:both;就足够了。 - Paolo Bergantino
3
假设父元素未指定高度。 - bendewey
这种方法在Firefox中可行，但在IE 6中不起作用。有什么解决方法吗？ - Steve Horn
这在Chrome中运行良好，但在Safari中不起作用 :(，请问还有其他建议吗，可以在Safari中运行？ - Marcos Galaviz
19

正如 Jens 在评论中所说：

另一种答案是如何使 div 不大于其内容？，它建议设置 display:inline-block。这对我非常有效。- Jens Jun 2 at 5:41

在所有浏览器中，这种方法都对我更加有效。

7

不要设置高度属性，而应该使用min-height。

3
你是一个冠军，这解决了我在IE上苦苦挣扎的问题 :))) - Tommy Nguyen
5
添加
clear:both;

针对父级div的CSS，或在父级div底部添加一个清除浮动的div。

这是正确的答案，因为overflow:auto;可能适用于简单的网页布局，但会干扰使用负边距等元素。

在父元素底部添加一个没有内容且clear:both的div解决了我的问题。所有其他解决方案都失败了。我同意，这应该是被接受的答案。 - Saša
4

对于那些无法从这个答案中找到解决方法的人：

尝试将padding值设置为大于0，如果子div有margin-top或margin-bottom，可以用padding来替换它们。

例如，如果您有以下内容：

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

最好将其替换为：

#parent
{
    padding: 30px 0px 20px 0px;
}
3
使用父元素的 height: auto 或者使用 min-height 属性都可以达到同样的效果，并且为了避免由于填充或边框引起的水平滚动条，可以在子元素上使用 box-sizing: border-box 或者在父元素上使用 overflow: hidden。
如果因为 body 的宽度而导致水平滚动条出现，那么可以使用 width:100% 来代替 width: 100vw ，以避免这种情况。
3

使用类似于自清除的 div 对于像这种情况非常适合。然后您只需在父元素上使用一个类，例如：

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

我们从哪里开始

这是一些样板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: overflow: auto

一个适用于所有现代浏览器以及 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;
}

方法三：在浮动元素下方添加清除元素

/* 
 * 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：向父元素添加清除浮动的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/

在IT技术中，当我们需要让一个子元素浮动在父元素中时，我们通常会遇到一个问题：父元素高度不能自适应。这篇文章介绍了如何通过使用CSS实现父元素高度自适应，以便更好地控制页面布局。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接