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

【问题标题】：Height of outer div not expanding with inner div外部 div 的高度不随内部 div 扩展
【发布时间】：2016-07-05 15:28:57
【问题描述】：

我有一个 100% 宽度的 bodyMain div。里面是一个带有自动边距的body div 800px（我可以使用'body'作为id吗？）。这里面有两个 div bodyLeft 和 bodyRight 分别为 200px 和 600px 宽。当我将内容添加到内部 div 时，bodyMain 和 body 都不会扩展 height 。所有高度都是自动的。

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

【问题讨论】：

标签： html css

【解决方案1】：

你必须添加

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

在浮动 div 结束时解决此问题。看 here

当浮动元素位于容器框内并且元素不会自动强制容器的高度调整为浮动元素时，就会出现问题。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。您可以使用 2 种方法来修复它：

clear:both
clearfix

【讨论】：

非常感谢您的回答！
非常感谢，我遇到了同样的问题，并通过添加这段代码来解决。

【解决方案2】：

这是使用浮点数时的常见问题。有几种常见的解决方案：

在 float 之后添加一个 div，使用 clear: both
将两个浮点数添加到具有CSS属性overflow: auto的容器中
将父元素设为浮点数
将 :after CSS 伪元素与 CSS 一起使用：.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
为父元素添加设置高度

See this article

【讨论】：

【解决方案3】：

简单的解决方案是让外部 div 溢出：隐藏（在样式属性中）。

谢谢

【讨论】：

【解决方案4】：

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

【讨论】：

请解释这些变化。我是设计新手。
当然，看：DIV 默认是block 级别元素，所以它的宽度默认设置为 100%。 height:auto; 也一样。所以我们不需要它。设置display:table; 我们确保元素的行为类似于table 元素，并且它始终适合包含其“单元格”的高度。如果您愿意，您可以搜索：将溢出隐藏添加到 DIV 父元素。为您的有趣问题 +1。

【解决方案5】：

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

我同意 Muhammed Irfan 的想法。不过我不同意他的方法。避免使用内联样式，除了小的 sn-ps。尤其是在这种情况下，因为很可能会有另一种情况需要clear: both。所以，添加一个 div，给它一个有意义的类名并应用额外的 CSS。

请参阅此fiddle 以获取示例。

【讨论】：

我同意，只是我专注于主要问题而不是内联样式。您应该或必须创建在需要时调用的类。