多列等高的CSS實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2012-12-03 16:31:28 作者：佚名

我要評(píng)論

這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會(huì)出現(xiàn)“斷層”的效果,接下來(lái)將介紹多列等高的實(shí)現(xiàn)方法，需要的朋友可以了解下

什么是等高布局?

先來(lái)看一個(gè)案例：

上圖中的頁(yè)面的主體內(nèi)容是兩列結(jié)構(gòu)，左列是用來(lái)導(dǎo)航的，右列是用來(lái)顯示內(nèi)容的。我們看到它們有一個(gè)共同的邊框，中間還有一條分隔線(xiàn)，左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會(huì)出現(xiàn)“斷層”的效果。在這里，等高布局是為了維護(hù)邊框線(xiàn)條的完整性，在有些地方則可能是為了維護(hù)背景的完整性，達(dá)到整體一致不缺失的效果。

布局方案

等高布局有幾種不同的方法，但目前為止我認(rèn)為瀏覽器兼容最好最簡(jiǎn)便的應(yīng)該是padding補(bǔ)償法。首先把列的padding-bottom設(shè)為一個(gè)足夠大的值，再把列的margin-bottom設(shè)一個(gè)與前面的padding-bottom的正值相抵消的負(fù)值，父容器設(shè)置超出隱藏，這樣子父容器的高度就還是它里面的列沒(méi)有設(shè)定padding-bottom時(shí)的高度，當(dāng)它里面的任一列高度增加了，則父容器的高度被撐到它里面最高那列的高度，其他比這列矮的列則會(huì)用它們的padding-bottom來(lái)補(bǔ)償這部分高度差。因?yàn)楸尘笆强梢杂迷趐adding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個(gè)障眼法。

代碼

先來(lái)看下沒(méi)有等高布局的情況

效果：

然后我們應(yīng)用等高布局：

效果如下：

在進(jìn)行具體操作的時(shí)候，padding-bottom的值大小取決于你的項(xiàng)目的實(shí)際情況，如果不確定，設(shè)大一點(diǎn)也無(wú)所謂。

最終的代碼：

復(fù)制代碼

代碼如下:

<!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; /*這個(gè)超出隱藏的聲明在IE6里不寫(xiě)也是可以的*/
}
.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補(bǔ)償了這部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>