你對(duì)CSS布局自適應(yīng)高度解決方法是否了解，這里和大家分享一下，本文要介紹的方法是采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來(lái)解決列高度相同的問(wèn)題。

CSS布局自適應(yīng)高度解決方法

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

先看代碼：

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

實(shí)現(xiàn)原理：

塊元素必須包含在一個(gè)容器里。

應(yīng)用overflow:hidden到容器里的元素。

應(yīng)用padding-bottom（足夠大的值）到列的塊元素。

應(yīng)用margin-bottom（足夠大的值）到列的塊元素。

padding-bottom將列拉長(zhǎng)變的一樣高，而負(fù)的margin-bottom又使其回到底部開(kāi)始的位置，同時(shí)，溢出部分隱藏掉了。

兼容各瀏覽器

IEMac5

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

/*\*/  
#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有個(gè)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.

測(cè)試環(huán)境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2通過(guò)。

【編輯推薦】

1. CSS中margin常見(jiàn)問(wèn)題解決方案
2. CSS中margin邊界疊加問(wèn)題及解決方案
3. CSS樣式表高效使用八大秘訣
4. 四種方法解決DIV高度自適應(yīng)問(wèn)題
5. 實(shí)現(xiàn)CSS垂直居中的五大方法及優(yōu)缺點(diǎn)