資源描述：
《css布局自適應高度解決方法》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。
1、CSS布局自適應高度解決方法CSS布局自適應高度解決方法確實讓人很頭疼，先看例子：這是一個比較典型的三行二列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多采用背景圖填充、加JS腳本的方法使列的高度相同，本文要介紹的是采用容器溢出部分隱藏和列的負底邊界和正的內(nèi)補丁相結合的方法來解決列高度相同的問題。先看代碼：#wrap{?overflow:hidden;?}#sideleft,#sideright{?padding-bottom:32767px;?margin-bottom:-32767px;??}實現(xiàn)原理：塊元素必須包含在一個容器里。應用ove
2、rflow:hidden到容器里的元素。應用padding-bottom（足夠大的值）到列的塊元素。應用margin-bottom（足夠大的值）到列的塊元素。padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，同時，溢出部分隱藏掉了。兼容各瀏覽器IEMac5得到高度正確，所以要過濾掉上面的代碼。/**/#sideleft,#sideright{?padding-bottom:32767px;?margin-bottom:-32767px;??}/**/?Opera1.Opera7.0-7.2不能正確清除溢出部分，所以要加：/*easy
3、clearing*/#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!imp
4、ortant;?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-b
5、ottom:-32767px!important;?height:0;?}}/**/3.Opera9的B2在修正8的bug.測試環(huán)境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2通過。最終效果:代碼：6、tent-Type"content="text/html;charset=utf-8"/>
Equalheight(DIV+CSS布局中自適應高度的解決方法)body{padding:0;margin:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:140%;text-align:center;background:#E7DFD3;}#wrap{width:750px;margin:0auto;overflow:hidden;}#h
7、eader{background:#E8E8E8;}#sideleft{width:580px;float:left;background:#FFF;text-align:left;}#sideright{width:170px;float:left;background:#F0F0F0;text-align:left;}/*easyclearing*/#wrap:after{content:'[DONOTLEAVEIT
