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

Question

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

18

我有一个宽度为100％的bodyMain div。里面有一个宽度为800px，带有自动边距的body div（我可以使用“body”作为id吗？）。在其中有两个div，bodyLeft和bodyRight分别为200px和600px宽。当我向内部div添加内容时，bodyMain和body都不会在高度上扩展。所有高度均为auto。

这是代码：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;
}

- Aamir Rizwan

5个回答

8

这是在处理浮动元素时经常出现的问题。有几种常见的解决方法：

在浮动元素后添加一个带有clear:both属性的div
将两个浮动元素放入一个CSS属性为overflow:auto的容器中
使父元素成为浮动元素
使用CSS伪元素:after和CSS：.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
为父元素添加固定高度

查看此文章

- jacktheripper

3

简单的解决方法是在外部div中使用overflow:hidden（在style属性中）。

谢谢。

- BlueSky

2

为避免与预定义标签名称混淆，请勿将body、html或head用作ID属性值。

我同意Muhammed Irfan的想法。不过，我不同意他的方法。除了小代码片段之外，应避免使用内联样式，特别是在这种情况下，因为很可能会出现另一种需要使用clear:both的情况。因此，添加一个div，并给它赋予有意义的类名，并应用额外的CSS。

请参见此示例。

- Bram Vanroy

我同意，我只关注主要问题而不是内联样式。你应该或必须创建类以便在需要时调用。 - irfanmcsd

2

jsFiddle demo

*{
    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;*/
}

- Roko C. Buljan

请解释一下这些更改。我是新手设计师。 - Aamir Rizwan

2

当然，看这里：DIV默认是块级元素，因此其宽度默认设置为100％。 height:auto;也是如此。所以我们不需要它。通过设置display:table;，我们确保元素像table元素一样运行，并且始终适合高度以包含其“单元格”。如果您想，可以搜索：“将溢出隐藏添加到DIV父元素”。对于您有趣的问题给个+1。 - Roko C. Buljan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- irfanmcsd · Accepted Answer

你必须添加

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

在浮动的div结束处解决此问题。详见这里。

当一个浮动元素在容器中时，会出现问题，因为该元素不会自动强制容器高度调整以适应浮动元素。当一个元素被浮动后，它的父元素将不再包含它，因为浮动已从流中移除。您可以使用两种方法来修复它：

clear:both
clearfix