2

当我将其高度设置为自动时，#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;
}
4

3 回答 3

3

你的问题是#main div有position:absolute;。您必须考虑该元素position:absolute;是否position:fixed;已从正常流程中删除，因此它们基本上不在其父级内部。

这是您运行的代码

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

希望有帮助

于 2013-09-23T20:38:58.733 回答
2

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

给我一点时间，我将尝试设置一个带有解决方案的 jsfiddle :)

！！！请参阅lazychio 的答案，这就是您要查找的内容。

于 2013-09-23T20:12:51.463 回答
1

只需添加溢出：自动；在 .css 文件中，例如：

#products_box{
    width:800px;
    height:auto;
    margin:auto;
    background-color:pink;
    overflow: auto;
    text-align:center;
    margin-left:200px;
}
于 2018-07-10T16:44:13.013 回答