将父 <div> 扩展到其子元素的高度
Posted
技术标签:
【中文标题】将父 <div> 扩展到其子元素的高度【英文标题】：Expanding a parent <div> to the height of its children 【发布时间】：2010-09-27 21:39:07 【问题描述】：我有一个类似这样的页面结构：
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
当内部div 的height 增加时，我希望父div 在height 中扩展。
编辑：
一个问题是，如果子内容的width 扩展超过浏览器窗口的width，我当前的CSS 会在父div 上放置一个水平滚动条。我希望滚动条位于页面级别。目前我的父 div 设置为overflow: auto;
你能帮我解决这个问题吗？
【问题讨论】：
你在浮动内部 div 吗？你能发布当前的 CSS 吗？ @Eric - 这也是我的问题 - 我的子 div(s) 有浮动：左，当我删除它时，“父”被自动识别并拉伸到全高！ 【参考方案1】：添加clear:both。假设您的列是浮动的。根据你的身高是如何指定父母的，你可能需要一个溢出：自动;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
【讨论】：
当内容比浏览器窗口宽时，这样做会在父 div 上提供一个水平滚动条。我希望水平滚动显示在整个页面上。 为什么需要overflow:auto;？在我的测试中明确：两者；够了。 这也假设父级没有指定高度。 这种方法在 Firefox 中运行良好，但在 IE 6 中不起作用。有什么解决方法吗？【参考方案2】：您在寻找2 column CSS layout吗？
如果是这样，请查看the instructions，它很容易上手。
【讨论】：
【参考方案3】：使用诸如自我清除div 之类的东西非常适合this 之类的情况。然后，您只需在父级上使用一个类...例如：
<div id="parent" class="clearfix">
【讨论】：
【参考方案4】：这是你想要的吗？
.childRightCol, .childLeftCol
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
【讨论】：
【参考方案5】：对于那些无法在this answer 那里的说明中弄清楚这一点的人：
尝试设置 padding 值 more 然后 0，如果子 div 有 margin-top 或 margin-bottom 你可以用填充替换它
例如，如果你有
#childRightCol
margin-top: 30px;
#childLeftCol
margin-bottom: 20px;
最好换成：
#parent
padding: 30px 0px 20px 0px;
【讨论】：
【参考方案6】：为父母试试这个，它对我有用。
overflow:auto;
更新：
另一个有效的解决方案：
家长：
display: table;
孩子：
display: table-row;
【讨论】：
overflow:auto 表示浏览器应该决定应用哪个值。真正做的诀窍是overflow: overlay。
@jmendeth 名为“overlay”的溢出值不存在。如果子 div 是浮动的，那么在声明 overflow:hidden.
哇哦。放松。一件事是声称overlay 在Webkit 之外不受支持。另一个完全不同的是说它根本不存在。请RTFM first。 ;)
如果它只在 Webkit 上，那么它只有 20% 存在 :P 为链接干杯，以前从未见过这个网站。它是否得到了很好的维护和更新？你发誓吗？
另一个答案是***.com/questions/450903/…，它建议设置display:inline-block。这对我很有用。【参考方案7】：
我让父 div 围绕子 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。
【讨论】：
【参考方案8】：添加
clear:both;
到父 div 的 css，或者在父 div 底部添加一个 div 来做 clear:both;
这是正确的答案，因为 overflow:auto;可能适用于简单的网页布局，但会混淆开始使用负边距等元素的元素
【讨论】：
在父级底部添加没有内容且清晰的 div：两者都为我解决了问题。所有其他解决方案都失败了。我同意，这应该是公认的答案。【参考方案9】：我将这个 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%;
【讨论】：
你用的是最小高度，所以不算;)【参考方案10】：您必须在父容器上应用 clearfix 解决方案。这是一篇很好的文章，解释了修复 link
【讨论】：
【参考方案11】：正如 Jens 在评论中所说的那样
另一个答案是How to make div not larger than its contents?... 建议设置 display:inline-block。这对我很有用。 – 延斯 6 月 2 日 5:41
这在所有浏览器中对我来说效果更好。
【讨论】：
【参考方案12】：如果您在#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;
【讨论】：
【参考方案13】：#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>您可以通过在 css 中使用 overflow:hidden; 属性进行管理
【讨论】：
【参考方案14】：按照规范的描述运行 - 这里的几个答案是有效的，并且与以下内容一致：
如果它有块级的孩子，高度是最顶部的块级子框的顶部边界边缘之间的距离，没有通过它折叠的边距，最底部的块的底部边界边缘-没有边距的级别子框通过它折叠。但是，如果元素具有非零的顶部填充和/或顶部边框，或者是根元素，则内容从最顶部子元素的顶部边距边缘开始。 （第一种情况表示元素的顶部和底部边距与最顶部和最底部子项的顶部和底部边距折叠在一起，而在第二种情况下，填充/边框的存在防止顶部边距折叠。）类似地，如果元素具有非零的底部填充和/或底部边框，则内容在最底部子元素的底部边缘结束。
从这里：https://www.w3.org/TR/css3-box/#blockwidth
【讨论】：
【参考方案15】：尝试为父母的身高提供max-content。
.parent
height: max-content;
https://jsfiddle.net/FreeS/so4L83wu/5/
【讨论】：
该属性在其他浏览器中的表现如何？在 MDN 上：developer.mozilla.org/en-US/docs/Web/CSS/… 这似乎是解决 Safari 12 中问题的唯一方法。 这么棒的css值！边缘不支持¯_(ツ)_/¯ 这是做的方式，其他方式都是假的 这是最好的方法。谢谢分享。【参考方案16】：以下代码对我有用。
css
.parent
overflow: auto;
html
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
【讨论】：
【参考方案17】：#childRightCol
float:right;
#childLeftCol
float:left;
#parent
display:inline;
【讨论】：
【参考方案18】：我们的起点
这里有一些样板的 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：溢出：自动
一个适用于所有现代浏览器和 Internet Explorer 回到 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：在浮动元素下方添加清除 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：向父元素添加清除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/
【讨论】：
【参考方案19】：不要设置 height 属性，而是使用 min-height。
【讨论】：
你是冠军，这解决了我在 IE 中遇到的问题:)))【参考方案20】：在父元素上使用height: auto 或min-height 将起作用。为了避免水平滚动条，可以通过在子元素上使用box-sizing: border-box 或在父元素上使用overflow: hidden 来避免由于填充或边框引起的水平滚动条。
至于由于 body 宽度引起的水平滚动条，如果你使用 width: 100vw 而不是使用 width:100%。
【讨论】：
以上是关于将父 <div> 扩展到其子元素的高度的主要内容，如果未能解决你的问题，请参考以下文章