css - 将 div 高度设置为自动时不显示背景颜色!为什么？

Question

当我将其高度设置为自动时，#container 的背景色不显示。但是当我将它设置为固定高度(如 1000 像素)时它确实会显示。我试过“溢出:自动”，但没有用。我该如何解决？我确实希望 #container 根据其内容垂直扩展，我也想显示其背景颜色。任何想法将不胜感激!

这是 HTML:

<div id="container">
    <div id="main">
        <div id="div1">text text text text text text text text text text text texttexttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
        <div id="div2">text text text text text text text text text text text texttexttext</div>
        <div class="clear"></div>
    </div><!--end of main-->
</div><!--end of container-->

这是 CSS:

#container {
    background-color: rgb(255, 102, 204);
    height: auto;
    width: 1200px;
    position: absolute;
}
#container #main {
    background-color: rgb(204, 51, 0);
    height: auto;
    width: 900px;
    position: absolute;
    overflow: auto;
}
#container #main #div1 {
    background-color: rgb(0, 204, 255);
    float: left;
    width: 300px;
    padding: 5px;
    height: auto;
    margin: 20px;
}
#container #main #div2 {
    background-color: rgb(0, 153, 153);
    height: auto;
    width: 400px;
    float: left;
    margin: 10px;
}
.clear {
    clear: both;
}

Answer 1

您遇到的问题是 #main div 有 position:absolute;。您必须考虑带有 position:absolute; 或 position:fixed; 的元素已从正常流中移除，因此它们基本上不在其父元素中。

here is your code running

有关更多详细信息，您可以查看 w3schools

希望对你有帮助