純CSS實現側邊欄/分欄高度自動相等

1、爲什麼要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個例子吧。

① 對於分欄佈局，咱們或許會用邊框(border)進行分隔，就如鄙人博客的分欄：邊框分欄 張鑫旭-鑫空間-鑫生活

此時最擔憂的問題就是高度不一致，尤爲是無邊框屬性的分欄高度超過有邊框屬性的分欄，結果就會：邊框高度不足時的糟糕表現 張鑫旭-鑫空間-鑫生活

雖然咱們可使用min-height或是邊框重疊技術進行適當修復，可是，依然存在侷限性。

② 對於分欄佈局，咱們或許會用實色填充背景，我個人雙欄demo頁面。實色背景分欄 張鑫旭-鑫空間-鑫生活

可是，若是兩欄的高度不一致，例如左側的超出了範圍，可能就會：實色背景高度不一致 張鑫旭-鑫空間-鑫生活

顯然，就不美觀了。因而可知，實現分欄高度的一致性仍是頗有必要的。

2、純CSS實現側邊欄/分欄高度自動相等這裏直接介紹我認爲的最佳的側邊欄/分欄高度自動相等方法。核心的CSS代碼以下（數值不固定）：

margin-bottom:-3000px; padding-bottom:3000px;再配合父標籤的overflow:hidden屬性便可實現高度自動相等的效果。

舉個簡單的實例吧，以下CSS及HTML代碼：

content{overflow:hidden;}
.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
.center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}
<div id="content">

<div class="left">左邊，無高度屬性，自適應於最高一欄的高度</div>
<div class="right">右邊，無高度屬性，自適應於最高一欄的高度</div>
<div class="center">中間，高度600像素，左右兩欄的高度與之自適應</div>
</div>
結果以下圖：
分欄高度自動相等 張鑫旭-鑫空間-鑫生活

您能夠狠狠地點擊這裏：分欄自動等高demo

說明：核心CSS代碼部分的3000像素是個可變值，若是您的分欄高度不可能高度超過2000像素，您就能夠設爲2000像素，若是會超過3000像素，那麼您要修改值爲4000像素或是更高。父標籤的overflow:hidden屬性是必須的，不然會顯示溢出的內容。

您還能夠狠狠地點擊這裏：分欄高度相等處理後「純CSS實現各種氣球泡泡對話框效果 」一文的其中高度溢出的demo頁面

3、其餘一些分欄高度處理的方法margin負值實現分欄高度顯示一致能夠說是最好的方法，固然，還有其餘一些輕便的替代方法。例如使用min-height屬性，IE6不支持min-height可是height會自動撐高，因此min-height + _height的組合也是經常使用手段之一；另外就是使用背景圖片了，利用背景圖片的垂直平鋪，能夠模擬分欄的等高背景效果，可是，此方法對佈局寬度有必定的要求，若是佈局寬度改變，背景圖片可能也要作一番修改。

對於這些方法，我想大部分同行都是知道的，我就不詳細敘述了。

若是您發現文章中有表述不許確或是有相關疑惑，歡迎交流。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wor...