CSS實例：CSS實現(xiàn)的等高網(wǎng)頁布局

2024-07-11 08:44:02

字體：大中小

供稿：網(wǎng)友

為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等高布局。
為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補丁”和“負外補丁”結(jié)合的方法實現(xiàn)的。
下面來看看實際的例子（三列等高），以下面的 XHTML 代碼為例：<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20個或更多個）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
CSS 代碼：*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
從效果中可以看到，左右兩列雖然內(nèi)容少，但高度和內(nèi)容最多的中間列等高。其核心代碼（拿本例來說）是：#wrap{
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
其中的 10000px 可以修改為其他值，但不能小于最高列的高度。
經(jīng)測試，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。
方法很簡單吧。從這里可以看出：看似簡單的 CSS,其實并不簡單。
======= 華麗的分割線（2009/02/18） ==================================
前兩天做網(wǎng)頁的時候運用這樣方法發(fā)現(xiàn)一個問題：如果子列有邊框 border 屬性的話，下邊框不會將不顯示。因為他們下面還有很長一部分，都被隱藏了，看圖理解：