外部div的高度不随内部div扩展
外部div的高度不随内部div扩展
提问于 2012-04-14 23:49:56
我有一个100%宽度的bodyMain分区。里面是一个带有自动边距的body div 800px (我可以使用'body‘作为id吗?)里面有两个bodyLeft和bodyRight，宽分别为200px和600px。当我将内容添加到内部div时，bodyMain和body都不会扩展高度。所有高度都是自动的。
下面是代码：http://jsfiddle.net/TqxHq/18/
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：
#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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-14 23:52:18
您必须添加
<div style="clear:both;"></div> 在浮动div的末尾修复此问题。请参阅here
当被浮动元素位于容器框内，并且元素不会自动强制容器的高度调整为被浮动元素时，就会发生问题。当一个元素被浮动时，它的父级将不再包含该元素，因为该浮动已从流中移除。您可以使用两种方法来修复它：
clear:both
clearfixStack Overflow用户
发布于 2016-07-05 15:28:57
简单的解决方案是让外部div overflow:hidden (在style属性中)。
谢谢
Stack Overflow用户
发布于 2012-04-15 00:00:14
要避免与预定义的标记名混淆，请避免使用body、html或head作为ID属性值。
我同意穆罕默德·伊尔凡的想法。不过，我不同意他的方法。避免内联样式，但小代码段除外。特别是在这种情况下，因为很可能还会有另一种情况需要clear: both。因此，添加一个div，给它一个有意义的类名，并应用额外的CSS。
有关示例，请参阅此fiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10154950
复制相关文章
相似问题