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有高度：auto，因为里面的内容会向下扩展div，并且html外观正常。

然而，当在chrome中查看时，它显示category_container_1，category_container_2都是960px x 0px，这是由于CSS中的高度：auto（我试图将其更改为100px，它在chrome上显示为960px x 100px）。 / p>

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

Answer 1

尝试使用min-height

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

Answer 2

在你的CSS中使用min-height:并给它一个高于0的值

Answer 3

因为内容会动态变化，我想你可以试试：

#middle {
position:relative;
width:100%;
max-width: 960px;    
margin: 0px auto;
padding-bottom:70px;
background-color:#FFFFFF;
overflow:hidden; min-height:1px;

防止div高度为“0”

3 个答案: