多列等高的CSS實現(xiàn)代碼
我要評論什么是等高布局?
先來看一個案例：
上圖中的頁面的主體內(nèi)容是兩列結(jié)構(gòu)，左列是用來導(dǎo)航的，右列是用來顯示內(nèi)容的。我們看到它們有一個共同的邊框，中間還有一條分隔線，左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現(xiàn)“斷層”的效果。在這里，等高布局是為了維護邊框線條的完整性，在有些地方則可能是為了維護背景的完整性，達到整體一致不缺失的效果。
布局方案
等高布局有幾種不同的方法，但目前為止我認(rèn)為瀏覽器兼容最好最簡便的應(yīng)該是padding補償法。首先把列的padding-bottom設(shè)為一個足夠大的值，再把列的margin-bottom設(shè)一個與前面的padding-bottom的正值相抵消的負(fù)值，父容器設(shè)置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時的高度，當(dāng)它里面的任一列高度增加了，則父容器的高度被撐到它里面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。
代碼
先來看下沒有等高布局的情況
效果：
然后我們應(yīng)用等高布局：
效果如下：
在進行具體操作的時候，padding-bottom的值大小取決于你的項目的實際情況，如果不確定，設(shè)大一點也無所謂。
最終的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應(yīng)布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*這個超出隱藏的聲明在IE6里不寫也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right
現(xiàn)在我的高度比left高，但left用它的padding-bottom補償了這部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了css設(shè)置多列等高布局的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-21
前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧
我們在寫頁面的時候，有的時候會遇到多欄布局，這篇文章主要介紹了前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟2018-06-05利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 下面小編就為大家?guī)硪黄獪\析CSS等高布局的6種方式。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-04
用CSS實現(xiàn)三列DIV等高布局以傳達更好的視覺效果
頁面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺效果，就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說2014-09-03- CSS網(wǎng)頁布局實例:三欄等高布局.2009-08-29
CSS實例：CSS實現(xiàn)的等高網(wǎng)頁布局
網(wǎng)頁制作Webjx文章簡介：為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等2009-04-02CSS實例:三列等高布局-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
三列等高CSS布局的一個實例， 修改國外的一個demo， 兼容到了IE5.5 和標(biāo)準(zhǔn)的瀏覽器OperaFirefoxSafari。 不過hack太多，不是很喜歡這樣做。 全部代碼如下2008-10-17
本文講的等高布局是在不手動設(shè)置元素高度的情況下，使用純css實現(xiàn)各個元素高度都相當(dāng)?shù)男Ч?，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2019-01-09
