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通過。

以上是CSS佈局自適應高度終極方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！