你對CSS布局自適應高度解決方法是否了解，這里和大家分享一下，本文要介紹的方法是采用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。

CSS布局自適應高度解決方法

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

先看代碼：

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

實現原理：

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

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

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

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

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

兼容各瀏覽器

IEMac5

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

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

Opera

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

/*easyclearing*/  
#wrap:after  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
#wrap  
{  
display:inline-block;  
}  
/*\*/  
#wrap  
{  
display:block;  
}  
/*endeasyclearing*/  
/*\*/  
 

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

/*\*/  
#sideleft,#sideright  
{  
padding-bottom:32767px!important;  
margin-bottom:-32767px!important;  
}  
@mediaalland(min-width:0px){  
#sideleft,#sideright  
{  
padding-bottom:0!important;  
margin-bottom:0!important;  
}  
#sideleft:before,#sideright:before  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
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、Netscape7.2通過。

【編輯推薦】

1. CSS中margin常見問題解決方案
2. CSS中margin邊界疊加問題及解決方案
3. CSS樣式表高效使用八大秘訣
4. 四種方法解決DIV高度自適應問題
5. 實現CSS垂直居中的五大方法及優缺點