div高度自适应的问题汇总

div高度自适应的解决办法，三种：

1、一个DIV的最小高度是400PX,当内容高度不足400PX时,其高度设置为400PX, 当内容高度大于400PX, 则按实际高度伸展

.a{height:400px;height:auto;min-height:400px;width:500px;}

 

#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下不在自

#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*/

}

 

2、在2个div的外围再加一个div,设置一个背景，背景的高度根据内容自动调整。

 

3、用js控制

<!--左右两个div，都没有定义高度，为了测试效果，加了背景颜色-->
<div id="left" style="float:left;width:300px;background:green;">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div id="right" style="float:left;width:300px;background:orange;">
<p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p>
</div>
<!-- js代码，放在以上两个div的后面就可以-->
<script language="javascript">
var a=document.getElementById("right")
var b=document.getElementById("left")
if (a.scrollHeight<b.scrollHeight)     //很多网友在这里写成了a.style.height，经测试不行。
{
a.style.height=b.scrollHeight+"px";  //我在实际操作中因为左边有最小高度，所以此处设定成了固定值。
}
else
{
b.style.height=a.scrollHeight+"px";  }
</script>

以上代码在IE和FF里测试均正常。而且因为这两个div被浮动了，而且宽度和小于页面宽度，所以在它们后面加了一行

<div style="clear: both;display: block"> </div>

防止后面的div挤到中间来。