1. <script type="text/javascript">    
  2. <!--    
  3. var l=document.getElementById("left").scrollHeight;   
  4. var r=document.getElementById("right").scrollHeight   
  5. if (r>l)   
  6. {   
  7. document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px";   
  8.   
  9. }   
  10. else  
  11. {   
  12. document.getElementById("right").style.height=document.getElementById("left").scrollHeight+"px";   
  13. }   
  14. -->    
  15. </script>   

网上的div等高方法大致有五种,这个算是其中一种的完善,无论left或是right高时,都可以实现自适应高度。而且就算遇到left或right里面有其他元素影响时,也可以通过在+"px"; 前面加上加减乘除来达到满意的效果,例,可写成:+5+"px"。

下面是三栏等高:

  1. <script language="javascript"
  2. var l=document.getElementById("left").scrollHeight 
  3. var m=document.getElementById("middle").scrollHeight 
  4. var r=document.getElementById("right").scrollHeight 
  5. layoutHeight=Math.max(l,m,r) 
  6. document.getElementById("left").style.height=layoutHeight+"px" 
  7. document.getElementById("right").style.height=layoutHeight+"px" 
  8. document.getElementById("middle").style.height=layoutHeight+"px" 
  9. </script> 

 

TAG javascript

« 上一篇 | 下一篇 »

相关文章

4 Responses to “js 解决两列、三栏div等高(自适应高度)”

原来的域名准备不用了,现在换个新的域名,如果还可以和你做链接的话,希望把地址改下,谢谢了!
原来的是www.mochen.net
现在www.lingyumeng.com
已经修改好了,呵呵
这个方法,当其中页面内容很长时,js脚本反应不过来!需要刷新一下才行!
Post by 拈花笑 on 2009, April 13, 10:41 AM #3
嗯,这个可以尝试用setTimeout让脚本过几秒运行,或者用window.onload,或者用背景平铺的方法。

Add your comments