|
原作者:Alex Robinson
原文標(biāo)題:Equal Height Columns
這是一個(gè)比較典型的三行二列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個(gè)設(shè)計(jì)師追求的目標(biāo)，按一般的做法，大多采用背景圖填充、加JS腳本的方法使列的高度相同，本文要介紹的是采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來解決列高度相同的問題。
先看代碼：
#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將列拉長變的一樣高，而負(fù)的margin-bottom又使其回到底部開始的位置，同時(shí)，溢出部分隱藏掉了。
兼容各瀏覽器
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有個(gè)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.
測試環(huán)境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過。
最終效果:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
