網頁中三列自適應高度布局的實現
網頁中三列自適應高度布局的實現三列的布局,一個固定寬度的左列是導航列,右列可以放Google Ads 或者 Flickr的像冊,自適應寬度的中間列是主要內容。
特點:
有一個自適應寬度的中間列與固定的寬度左右列。
中間列的主要內容首先出現在網頁中。
可以允許任一個列的內容為最高。
非常簡單的CSS和最少的Hacks。
Step 1: 搭建結構
先從header, footer, and container開始.
<div id="header"></div> <div id="container"></div> <div id="footer"></div> |
給Container 一個左右方向的內補丁,其寬度相當于左右列的寬度.
#container { padding-left: 200px; /* LC width */ padding-right: 150px; /* RC width */ } |
現在的布局如下圖:
在已有布局基礎上加再左、中、右列
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> |
然后加寬度和浮動,底部的Footer須清除浮動,使其保持在最下面。.
#container .column { float: left; } #center { width: 100%; } #left { width: 200px; /* LC width */ } #right { width: 150px; /* RC width */ } #footer { clear: both; } |
現在的代碼運行的結果如下圖,由于#container的左右填充和#center100%的緣故,左列和右列被擠到#center的下面,這不是我們想要的結果。
Step 3: 給左欄定位
采取二步給這個左欄定位,首先給左欄一個-100%的左邊界,相當于中間欄的寬度,此時,左欄和中間欄重合,共享它的左邊緣,如下圖。
#left { width: 200px; /* LC width */ margin-left: -100%; } |
然后采用相對定位的辦法將左欄定位到距右邊200PX的地方(也就是左欄的寬度)。
#container .columns { float: left; position: relative; } #left { width: 200px; /* LC width */ margin-left: -100%; right: 200px; /* LC width */ } |
現在左欄的位置正好是#container的左內補丁。
Step 4: 給右欄定位
將右欄定位于#container的右內補丁位置,只要設定右欄的負右邊界就可。
#right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ } |
現在布局中的空白區域已消失。
Step 5:最后的完善
至此,布局已基本完成,但如果瀏覽器的最小尺寸比中心寬度小,那么左列將變的很小,所以要設定個最小寬度,可惜IE現在還不支持。800x600沒問題
body { min-width: 550px; /* 2x LC width + RC width */ } |
第四步完成的代碼在IE里左欄會消失,現在要做的是把左欄定到它正確的位置上去。
* html #left { left: 150px; /* RC width */ } |
內容的邊距
我們需要給內容一個內補丁(10PX),否則的話,文本都頂著邊。
列的總寬度等于(padding+width)。
#left { width: 180px; /* LC fullwidth - padding */ padding: 0 10px; right: 200px; /* LC fullwidth */ margin-left: -100%; } |
對IE5.x,應該用個hacks
body { min-width: 630px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */ } #container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ } #container .column { position: relative; float: left; } #center { padding: 10px 20px; /* CC padding */ width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -190px; /* RC fullwidth + CC padding */ } #footer { clear: both; } /*** IE Fix ***/ * html #left { left: 150px; /* RC fullwidth */ } |
高度自適應
#container { overflow: hidden; } #container .column { padding-bottom: 20010px; /* X + padding-bottom */ margin-bottom: -20000px; /* X */ } #footer { position: relative; } |
這個代碼起源于adapted wholesale。
遺憾的是現在Opera還不支持#container的overflow,期待版本9。
現在IE還不能真正的自適應高度,還要加下面的代碼,如果你需要#footer,可再加個DIV(#footer外面)。
<div id="footer-wrapper"> <div id="footer"></div> </div> * html body { overflow: hidden; } * html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #fff; /* Same as body background */ } |
posted on 2008-03-26 14:21 gembin 閱讀(479) 評論(0) 編輯 收藏 所屬分類: CSS