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

2020-03-24 18:07:57

字體：大中小

供稿：網(wǎng)友

原作者:Alex Robinson
原文標(biāo)題:Equal Height Columns這是一個(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又使其回到底部開始的位置，同時(shí)，溢出部分隱藏掉了。兼容各瀏覽器IE Mac 5得到高度正確，所以要過(guò)濾掉上面的代碼。/*/*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/Opera1. 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.測(cè)試環(huán)境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過(guò)。最終效果:運(yùn)行代碼框

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行] 原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight 本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：用CSS打造可折疊伸縮名片菜單

下一篇：利用CSS改善網(wǎng)站可訪問(wèn)性