Css 将div height设置为auto时不显示背景色!为什么?

Css 将div height设置为auto时不显示背景色!为什么?,css,html,height,Css,Html,Height,当我将#容器的高度设置为“自动”时,它的背景色不显示。但当我将它设置为固定高度(如1000px)时,它确实会显示出来。我试过“溢出:自动”,但不起作用。我怎样才能修好它?我确实希望#容器根据其内容进行垂直扩展,并且我还希望显示其背景色。任何想法都将不胜感激 以下是HTML: 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

当我将#容器的高度设置为“自动”时,它的背景色不显示。但当我将它设置为固定高度(如1000px)时,它确实会显示出来。我试过“溢出:自动”,但不起作用。我怎样才能修好它?我确实希望#容器根据其内容进行垂直扩展,并且我还希望显示其背景色。任何想法都将不胜感激

以下是HTML:


文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
以下是CSS:

#容器{
背景色:rgb(255、102、204);
高度:自动;
宽度:1200px;
位置:绝对位置;
}
#集装箱总管{
背景色:rgb(204,51,0);
高度:自动;
宽度:900px;
位置:绝对位置;
溢出:自动;
}
#集装箱#主#1舱{
背景色:rgb(0,204,255);
浮动:左;
宽度:300px;
填充物:5px;
高度:自动;
利润率:20px;
}
#集装箱#主#二舱{
背景色:rgb(0,153,153);
高度:自动;
宽度:400px;
浮动:左;
利润率:10px;
}
.清楚{
明确:两者皆有;
}

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

给我一点时间,我将尝试用一个解决方案设置一个JSFIDLE:)


!!!看看lazychio的答案,这就是你想要的。

你的问题是
#main div
位置:绝对。您必须考虑
位置为:绝对的元素或<代码>位置:固定从正常流中删除,因此它们基本上不在其父流中

有关详细信息,请查看


希望有帮助

只需添加溢出:自动;例如,在.css文件中:

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

不链接到以下学校:。MDN()更好;对于定位:w3schools解释得很好,MDN更适合参考,它有更多的最新信息