CSS實現元素等高自適的幾種方法

1.使用背景圖片實現等高自適。
這種方法感覺上是種視覺上的欺騙，實際是布局元素的高度並不是相等的。原理是：將需要等高自適的塊（如A、B）都包含在一個容器C中，給容器C一個背景圖片，這張圖片包含需要等高自適的塊A和B的背景（圖片要處理好，像素要算準）。當A、B高度不等時，由於較高的塊將容器C給撐開了，那麼容器C的背景圖片顯示的高度就是較高者的高度，導致視覺上A、B兩者的高度似乎相等了，實際是不相等的。
實際操作方法和Demo參看：http://www.52css.com/article.asp?id=898。

 

2.利用邊距和填充實現 (推薦!)
方法：給A和B分別添加CSS屬性：padding-bottom:10000px;margin-bottom:-10000px;另外給容器C添加CSS屬性：overflow：hidden；
這種方法可以歸納為：“隱藏容器溢出”、“正內補丁”和“負外補丁”結合。
Demo：http://www.hemin.cn/blog/?p=761#more-761

3.使用table
老舊的table布局方式可以方便的實現等高。

 

4.使用javascript
代碼如下：

代碼

1 function equal_height(ele1,ele2){
2      if(!(document.getElementById(ele1))) return false
3      if(!(document.getElementById(ele2))) return false;
4      var mainCon=document.getElementById(ele1).scrollHeight;
5      var sidebar=document.getElementById(ele2).scrollHeight;
6      layoutHeight=Math.max(mainCon,sidebar);
7      document.getElementById(ele1).style.height=layoutHeight+"px";
8      document.getElementById(ele2).style.height=layoutHeight+"px";
9  }

 

上面是代碼的主要部分，作用是判斷最大高度並將所有列的高度替換成最高高度。Math的對象的max方法可以接受任意多的參數，所以這個判斷函數可以保證多個列等高自適。