Html 父 div 如何根据孩子的身高自动调整其高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5456154/
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
How can the parent div auto resize its height based on the child's height?
提问by
How can the parent div auto resize it's height based on the child's height?
父 div 如何根据孩子的身高自动调整其高度？
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some contents here (height is set to auto)
</div>
</div>采纳答案by Kyle
I made a very simpleexamplefor you to see how variable parent height works.
我做了一个非常简单的例子，让你看看可变父级高度是如何工作的。
.parent
{
height: auto;
border: 1px dashed #f00;
padding: 5px;
}
.child
{
height: 100px;
border: 1px dashed #0f0;
}<div class="parent">
<div class="child">
</div>
</div>Follow what is there and you'll do fine.
遵循那里的东西，你会做得很好。
After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both;to clear the floats and make the #maindiv appear filled in.
查看您的代码后，这是一个浮动问题，您必须在底部添加一个新 divclear: both;以清除浮动并使#maindiv 显示为填充。
回答by Vicky
div#main{
width: 970px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
Remove height attribute
移除高度属性
回答by Elias
CSS3
CSS3
.container {
display: inline;
position: relative;
}
Should fix it. Use inline-blockif you want it to be a block with inline.
应该修复它。使用inline-block，如果你希望它是内联块。
