Html 将父 <div> 扩展到其子项的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/384145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expanding a parent <div> to the height of its children
提问by Steve Horn
I have a page structure similar to this:
我有一个类似于这样的页面结构：
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
I would like for the parent divto expand in heightwhen the inner div's heightincreases.
我想父div在扩张height时内div的height增加。
Edit:
One problem is that if the widthof the child content expands past the widthof the browser window, my current CSS puts a horizontal scrollbar on the parent div. I would like the scrollbar to be at the page level. Currently my parent div is set to overflow: auto;
编辑：
一个问题是，如果width子内容的 扩展超过width浏览器窗口的 ，我当前的 CSS 会在父级上放置一个水平滚动条div。我希望滚动条处于页面级别。目前我的父 div 设置为overflow: auto;
Can you please help me with the CSS for this?
你能帮我用CSS吗？
回答by Dr Casper Black
Try this for the parent, it worked for me.
为父母试试这个，它对我有用。
overflow:auto;
UPDATE:
更新：
One more solution that worked:
另一种有效的解决方案：
Parent:
家长：
display: table;
Child:
孩子：
display: table-row;
回答by bendewey
add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
添加一个clear:both. 假设您的列是浮动的。根据您的身高是如何指定的，您可能需要一个溢出：自动；
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
回答by noisy
As Jens said in comment
正如詹斯在评论中所说
An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41
另一个答案是如何使 div 不大于其内容？...它建议设置 display:inline-block。这对我很有用。– 延斯 6 月 2 日 5:41
This works far better for me in all browsers.
这在所有浏览器中对我来说效果更好。
回答by Skotee
Try to give max-contentfor parent's height.
尝试max-content为父母的身高付出。
.parent{
height: max-content;
}
回答by imy
For those who can not figure out this in instructions from this answerthere:
Try to set paddingvalue morethen 0, if child divs have margin-top or margin-bottom you can replace it with padding
尝试设置填充值更多的则0，如果孩子的div有边距或下边距你可以用填充替换
For example if you have
例如，如果你有
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
it'll be better to replace it with:
最好将其替换为：
#parent
{
padding: 30px 0px 20px 0px;
}
回答by Tim Knight
回答by Internet Marketing Boise
Add
添加
clear:both;
To the css of the parent div, or add a div at the bottom of the parent div that does clear:both;
到父div的css中，或者在父div的底部添加一个清除的div：both；
That is the correct answer, because overflow:auto; may work for simple web layouts, but will mess with elements that start using things like negative margin, etc
那是正确答案，因为 overflow:auto; 可能适用于简单的网页布局，但会弄乱开始使用负边距等内容的元素
回答by Eric
Does this do what you want?
这是你想要的吗？
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
回答by lpfavreau
Are you looking for a 2 column CSS layout?
您在寻找2 列 CSS 布局吗？
If so, have a look at the instructions, it's pretty straightforward for starting.
如果是这样，请查看说明，入门非常简单。
回答by Ian
I made a parent div expand around content of a child div by having the child div as a single column that does not have any positioning attribute such as absolute specified.
我让父 div 围绕子 div 的内容展开，方法是将子 div 作为单个列，该列没有任何定位属性（例如绝对指定）。
Example:
例子：
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
Based on maincolumn div being the deepest child div of #wrap this defines the depth of the #wrap div and the 200px padding on either side creates two big blank columns for you to place absolutely positioned divs in as you please. You could even change the padding top and bottom to place header divs and footer divs using position:absolute.
基于 maincolumn div 是 #wrap 最深的子 div，它定义了 #wrap div 的深度，两边的 200px 填充创建了两个大的空白列，供您随意放置绝对定位的 div。您甚至可以使用 position:absolute 更改填充顶部和底部以放置页眉 div 和页脚 div。
