CSS布局自適應高度終極方法

這篇文章主要介紹了關於CSS布局自適應高度終極方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

我們排版的最終目的是讓程式員能快速綁定，最終的真實資料能和一樣，但是我們經常在國字型頁面裡面碰到左右兩列的高度不確定，這樣我們必須要把兩列的自己適應，請看解決方案

，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多採用背景圖填充、加JS指令碼的方法使列的高度相同，本文要介紹的是採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。

先看代碼：

#wrap{ overflow: hidden; }#sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px;  }

實現原理：

塊元素必須包含在一個容器裡。

應用overflow: hidden 到容器裡的元素。

應用 padding-bottom（足夠大的值）到列的塊元素 。

應用margin-bottom（足夠大的值）到列的塊元素。

padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，同時，溢出部分隱藏掉了。

相容各瀏覽器

IE Mac 5

得到高度正確，所以要過濾掉上面的代碼。

/*\*/#sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px;  }/**/

Opera

1. Opera7.0-7.2不能正確清除溢出部分，所以要加：

/* easy clearing */#wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]';  display: block;  height: 0;  clear: both;  visibility: hidden; }#wrap { display: inline-block; }/*\*/#wrap { display: block; }/* end easy clearing *//*\*/

2. Opera8處理overflow: hidden有個BUG,還得加上以下代碼：

/*\*/#sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important;  }@media all and (min-width: 0px) {#sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important;  }#sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; }}/**/

3.Opera9的B2在修正8的bug.

測試環境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過。