Question

当我将其高度设置为auto时，＃container的背景颜色不会显示。但它确实显示我将其设置为1000px的固定高度。我试过“溢出：自动”，但它没有用。我该如何解决？我确实希望#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

希望有所帮助

Answer 2

所有元素要么绝对定位，要么浮动，不会计算父级的高度。尝试在某些元素上或至少在容器上设置最小高度。

给我一点时间，我会尝试设置一个解决方案的jsfiddle：）

!!!请参阅lazychio的答案，以及您正在寻找的内容。

Answer 3

只需添加overflow：auto;例如，在.css文件中：

#products_box{
    width:800px;
    height:auto;
    margin:auto;
    background-color:pink;
    overflow: auto;
    text-align:center;
    margin-left:200px;
}

将div高度设置为auto时，背景颜色不显示！为什么？

3 个答案: