html - 防止div高度为 "0"

Question

我有这个 html 结构:-

<div id="middle">
    <div id="category_container_1" class="category_container" rel="1">
        <div class="big"><img src="catalog/view/theme/default/images/1-big.png"></div>
        <div class="small"><img src="catalog/view/theme/default/images/1-6.png"></div>
    </div>
    <div id="category_container_2" class="category_container" rel="2">
        <div class="big"><img src="catalog/view/theme/default/images/1-big.png"></div>
        <div class="small"><img src="catalog/view/theme/default/images/1-6.png"></div>
    </div>
</div>

CSS 是这样的:-

#middle {
    position:relative;
    width:100%;
    max-width: 960px;
    height:auto;
    margin: 0px auto;
    padding-bottom:70px;
    background-color:#FFFFFF;
    overflow:auto;
}
.category_container{
    width:100%;
    height: auto;
    clear:both;
}

我将 .category_container 设置为 height: auto，因为里面的内容会向下扩展 div，并且 html 外观效果很好。

但是，在 chrome 中查看时，它显示 category_container_1，category_container_2 都是 960px x 0px，这是由于 height: auto 在 CSS 中(我试图将其更改为 100px，它在 chrome 上显示为 960px x 100px)。

在这种情况下，如何使 chrome 中的 div 为 960px x 这些 div 的实际像素？

Answer 1

尝试使用最小高度

.category_container{
    width:100%;
    height: auto;
    min-height : valueabove 0 ;
    clear:both;
}