2007-04-09

不用js也能实现几个未知高度的容器对齐（续）

关键字: overflow:hidden
        原以为用这个不需js就可实现的几个未知高度容器的对齐觉得非常方便，而且免去了js有时所带来的麻烦。但在这几天对这组代码的重复使用过程中，发现了其不少的弊端，其中大多问题出在overflow：hidden属性上（外容器外的的相对定位容器被隐藏不能显示、外容器内锚点设定时该容器内锚点以上的页面内容消失等），而这又是这组代码为了实现容器自适应必不可少的一条加在外容器结构体中的属性；所以在考虑使用何种方法来实现几个未知容器适应时，更应因情况而言，可以从效率、易用、危害性（指对后续开发和重写时带来的负面影响较小）方面来考虑。
        除去浏览器对js的阻止，以下代码的简洁和易用性都优于上述的纯css实现那组代码，而且从小马哥（一位page Builder 前辈）获悉到，它的执行效率也要高于上述代码，对像firefox那样的标准浏览器而言尤其如此。代码如下：
js 代码
 
  1. function setABHeight(eABa,eABb) {  
  2.     var colHeightNeed = this.document.getElementById(eABa);  
  3.     if (!colHeightNeed){}  
  4.     else  
  5.     {  
  6.         var colABaH = this.document.getElementById(eABa).scrollHeight;  
  7.         var colABbH = this.document.getElementById(eABb).scrollHeight;  
  8.         if (colABaH > colABbH)  
  9.         {  
  10.             this.document.getElementById(eABb).style.height=
  11. this.document.getElementById(eABa).scrollHeight+"px";  
  12.         }  
  13.         else if (colABbH > colABaH)  
  14.         {  
  15.             this.document.getElementById(eABa).style.height=
  16. this.document.getElementById(eABb).scrollHeight+"px"  
  17.         }  
  18.     }  
  19. };  
  20.   
  21. window.onload = function(){  
  22.     setABHeight("JsColAba","JsColAbb");  
  23. };  
评论
发表评论

您还没有登录，请登录后发表评论

tiger.passion
搜索本博客
我的相册
636a5d3f-1fce-3bb9-89d8-b13e5c6318d4-thumb
w3c01
共 46 张
存档
最新评论