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

2024-07-11 08:20:11

字體：大中小

來源：轉載

供稿：網友

原作者:Alex Robinson
原文標題:Equal Height Columns

這是一個比較典型的三行二列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多采用背景圖填充、加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;
}
}
/**/