DIV的高度自动拉伸（height属性）在IE 7和Firefox下无效和解决方法

#mainbody{

..
min-height:400px;
*min-height:400px;

height:auto;
*height:400px;
}

以上CSS在IE 6.0，FireFox下可以实现Div高度根据内容自动拉伸，IE6下当Div高度大于400px时，Div会自动拉伸。

但在IE7下却无法实，其原因就是*height:400px;在IE7下不在自动拉伸，而是变为固定高度，那么当Div内部嵌套内容高于 400px时，就会被截断。

目前IE 7可以正确支持!important（FireFox同样也支持），故修改如下，其书写顺序以firefox的写在前面，IE7的写在中间，IE6的写在最后面。

#mainbody{

..

height:auto!important; /* IE7+FF 这句必须写在前面*/
min-height:400px;
*height:400px; /*IE6*/

}

 

在Firefox下，虽然内层的IDV高度为200px，但是外层的DIV的高度还是100px，没有变化，也就是说不能自动拉高！而在IE下就不会有这种问题，外层的DIV自动拉高为200px。

现在，再在<div class="in"></div>下面加一行：<div style="clear:both;"></div>，再分别在IE和Firefox下看看效果如何呢？是不是在Firefox下也可以自动纵向拉伸了呢？