js 解决两列、三栏div等高(自适应高度)

  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> 

 

Tags: javascript

上一篇: 开启Windows Script Host(WSH) 的方法
下一篇: 译文:开发人员经常犯的8个设计错误

相关文章

访客评论

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

发表评论

评论内容 (必填):