Html 外部 div 的高度不随内部 div 扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10154950/
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
Height of outer div not expanding with inner div
提问by Aamir Rizwan
I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.
我有一个 100% 宽度的 bodyMain div。在它里面是一个带有自动边距的 body div 800px（我可以使用 'body' 作为 id 吗？）。在这里面有两个 div bodyLeft 和 bodyRight 分别是 200px 和 600px 宽。当我向内部 div 添加内容时， bodyMain 和 body 都不会在 height 上扩展。所有高度都是自动的。
Here is the code: http://jsfiddle.net/TqxHq/18/
这是代码：http: //jsfiddle.net/TqxHq/18/
HTML:
HTML：
<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>
CSS:
CSS：
#bodyMain{
border:1px solid red;
width:100%;
height:auto;
}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}
回答by irfanmcsd
You must add
你必须添加
<div style="clear:both;"></div>
at the end of floating div to fix this issue. see here
在浮动 div 结束时解决此问题。看 这里
Problem happens when a floated element is within a container box and element does not automatically force the container's height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
当浮动元素位于容器框内并且元素不会自动强制容器的高度调整为浮动元素时，就会出现问题。当一个元素被浮动时，它的父元素不再包含它，因为浮动被从流中移除。您可以使用 2 种方法来修复它：
clear:both
clearfix
回答by Hymantheripper
This is a common issue when working with floats. There are a couple of common solutions:
这是使用浮点数时的常见问题。有几种常见的解决方案：
Add a div after the floats with clear: both
Add the two floats into a container with the CSS attribute
overflow: autoMake the parent element a float
Using the :after CSS pseudo element with the CSS:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}Adding a set height to the parent element
在浮动后添加一个 div 清除：两者
将两个浮点数添加到具有 CSS 属性的容器中
overflow: auto使父元素浮动
在 CSS 中使用 :after CSS 伪元素：
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}给父元素添加一个设置的高度
回答by BlueSky
The simple solution is to have outer div overflow:hidden (in style attribute).
简单的解决方案是让外部 div 溢出：隐藏（在样式属性中）。
Thank you
谢谢
回答by Bram Vanroy
To avoid confusion with predefined tag names, refrain from using body, html, or headas ID attribute values.
为了避免与预定义的标签名称，副歌混乱使用body，html或head作为ID属性值。
I agree with Muhammed Irfan's idea. I don't agree with his method though. Avoid inline styling except for small snippets. Especially in this case, because it is likely that there will be another case where clear: bothis necessary. So, add a div, give it a meaningful class name and apply the additional CSS.
我同意 Muhammed Irfan 的想法。不过我不同意他的方法。除了小片段之外，避免内联样式。尤其是在这种情况下，因为很可能还会有另一种情况clear: both需要。所以，添加一个 div，给它一个有意义的类名并应用额外的 CSS。
See this fiddlefor an example.
有关示例，请参阅此小提琴。
回答by Roko C. Buljan
jsFiddle demo
jsFiddle 演示
*{
margin:0;
padding:0;
}
#bodyMain{
position:relative;
overflow:hidden; /*added*/
border:1px solid red;
/*removed height:auto;*/
/*removed width:100%;*/
}
#body{
display:table;/*added*/
border:1px solid green;
width:804px;
margin: 0 auto; /*improved*/
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200px;
/*removed height:auto;*/
}
#bodyRight{
border:1px solid orange;
float:right;
width:600px;
/*removed height:auto;*/
}
