<!–左右两个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挤到中间来。

版权声明:本文为ecmascript原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/ecmascript/archive/2009/05/08/1452632.html