網頁中三列自適應高度布局的實現
三列的布局，一個固定寬度的左列是導航列，右列可以放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 */
} |