转载--左右两个div高度自动一致
<!–左右两个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挤到中间来。