我們一般拿出來討論的自適應高度的div布局，都是指有背景區分的，不用區分的三列布局很容易。不過在實際應用中很少有**這樣用，大多都是不用背景區分的。不過在這裡我們並不討論這種布局的實用性到底如何，而只是討論實現這種布局的一種較完美的解決方案而已。
所謂自適應高度，也就是不管某一列撐長而其它列的高度也跟跟相應地撐長，這個效果如果用table的話是輕而易舉的，而用div就沒那麼容易了。之前本民工也嘗試了不少辦法，比如用js控制、padding-bottom乙個很大的負值……但都覺得不夠完美。後來在藍色理想找到乙個國外的站，感覺這是目前為止最完美的一種解決方案了，不用hack、不用js、相容性強……他們把這種布局稱之為：完美的聖杯。
原理其實很容易，理解之後應該可以解決很多樣的布局方案。見上圖，.colmask、.colmin、.colleft，分別為三列背景的容器，最外層的.colmask設定overflow:hidden;，通過相對定位分成三列。而內容容器.col1、 .col2、 .col3都放在最內層的.colleft裡面，通過相對定位定好位置，所以不管.col1、 .col2、 .col3哪乙個伸長或縮短，外部的.colmask、.colmin、.colleft都會跟著伸長與縮短，也就實現了我們所要的效果。
這裡是頭部
div>
<
div
class
="colmask threecol"
>
<
div
class
="colmid"
>
<
div
class
="colleft"
>
<
div
class
="col1"
>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
<
p>
這裡是中間
p>
div>
<
div
class
="col2"
>
這裡是左欄
div>
<
div
class
="col3"
>
<
p>
這裡是右欄
p>
<
p>
這裡是右欄
p>
<
p>
這裡是右欄
p>
<
p>
這裡是右欄
p>
div>
div>
div>
div>
<
div
class
="footer"
>
這裡是底部
div>
body
>
html
>
典型的三行二列居中高度自適應布局
如何使整個頁面內容居中，如何使高度適應內容自動伸縮。這是學習css布局最常見的問題。下面就給出乙個實際的例子，並詳細解釋。本文的經驗和是藍色理想論壇xpoint guoshuang共同討論得出的。首先先按這裡看實際執行效果，這個頁面在mozilla opera和ie瀏覽器中均可以實現居中和高度自適應...
三行兩列右列固定左列自適應寬度的CSS
dsclub,兀兒 幹部 meta name content 任兀 meta content name keywords title xhml1.0 doc title style type text css id internalstyle body p header maincontent ri...
聖杯布局（三行三列布局）
布局效果類似聖杯，所以叫聖杯布局。就是三行三列布局 核心 主要就是實現中間主體部分中的左右定寬 中間自適應的布局效果 左右定寬 left,right left center right class left div class right div class center div 改變順序，需要把c...