Html 父 div 的高度没有增长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4773493/
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
parent div does not grow in height
提问by samoyed
I'm having trouble getting a parent div to extend its height as its children grow (Freud? :-))
随着孩子的成长，我无法让父 div 扩展其高度（弗洛伊德？:-)）
the parent here being "main_bottom" which contains "main_mid" and its children.
这里的父项是“main_bottom”，其中包含“main_mid”及其子项。
the structure is a little unusual because the text has to be withinthe rounded corners, which are large, so i could not use the usual 'fixed top - then dynamic mid -then fixed bottom' routine.
结构有点不寻常，因为文本必须在圆角内，圆角很大，所以我不能使用通常的“固定顶部 - 然后动态中间 - 然后固定底部”例程。
of course the horrible pink and red are only so that the children divs dimensions are easy to see..
当然，可怕的粉红色和红色只是为了让孩子们的 div 尺寸很容易看到..
any help will be highly appreciated
任何帮助将不胜感激
have a nice day
祝你今天过得愉快
回答by slikts
One of the parent containers for the text has a fixed height, and the text is floated but not cleared. Remove the height: 135px(perhaps replace with min-height) rule from #main_bottomand add an overflow: autorule to #main_midto clear the float and the layout will work as intended.
文本的父容器之一具有固定高度，文本浮动但不清除。从中删除height: 135px（可能替换为min-height）规则#main_bottom并添加overflow: auto规则#main_mid以清除浮动，布局将按预期工作。
回答by Xavier Barbosa
add these definitions
添加这些定义
#main_bottom {
min-height: 600px;
overflow: auto;
}
#main_mid {
overflow: auto;
height: auto;
}
with overflow: autoand height: autothe container will fit to the content inside.
与overflow: auto和height: auto容器将适合里面的内容。
回答by yujohnnyzhou
I met these problems couple time. My solution is that adding display:block; in child div and height:auto; in parent div.
我几次遇到这些问题。我的解决方案是添加 display:block; 在子 div 和 height:auto 中；在父 div 中。
div.parent {
...
height: auto;
...
}
div.child {
...
display: block;
...
}
