外div的高度不随内div扩展 | 外div的高度不随内div扩展

本文介绍了外div的高度不随内div扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个bodyMain div的100％宽度。里面是一个body div 800px与汽车边距（我可以使用身体作为id吗？）。在这里有两个divs bodyLeft和bodyRight分别200px和600px宽。当我向内部div添加内容时，bodyMain和body都不会在高度上展开。所有高度都是自动的。

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.

以下是代码：

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;
}

推荐答案

You must add

<div style="clear:both;"></div>

在浮动div结尾处修复此问题。请参阅

at the end of floating div to fix this issue. seehere

问题发生在浮动元素在容器箱内，并且元件不会自动强制容器的高度调整到浮动元件。当一个元素被浮动时，它的父元素不再包含它，因为float从流中被移除。您可以使用两种方法来修复它：

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:

clear:both
clearfix

这篇关于外div的高度不随内div扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！