網(wǎng)頁(yè)中三列自適應(yīng)高度布局的實(shí)現(xiàn)
三列的布局，一個(gè)固定寬度的左列是導(dǎo)航列，右列可以放Google Ads 或者 Flickr的像冊(cè)，自適應(yīng)寬度的中間列是主要內(nèi)容。
特點(diǎn):
有一個(gè)自適應(yīng)寬度的中間列與固定的寬度左右列。
中間列的主要內(nèi)容首先出現(xiàn)在網(wǎng)頁(yè)中。
可以允許任一個(gè)列的內(nèi)容為最高。
非常簡(jiǎn)單的CSS和最少的Hacks。
Step 1: 搭建結(jié)構(gòu)
先從header, footer, and container開(kāi)始.
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
|
給Container 一個(gè)左右方向的內(nèi)補(bǔ)丁,其寬度相當(dāng)于左右列的寬度.
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
|
現(xiàn)在的布局如下圖:
在已有布局基礎(chǔ)上加再左、中、右列
<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> |
然后加寬度和浮動(dòng)，底部的Footer須清除浮動(dòng)，使其保持在最下面。.
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
} |
現(xiàn)在的代碼運(yùn)行的結(jié)果如下圖，由于#container的左右填充和#center100%的緣故，左列和右列被擠到#center的下面，這不是我們想要的結(jié)果。
Step 3: 給左欄定位
采取二步給這個(gè)左欄定位，首先給左欄一個(gè)-100%的左邊界，相當(dāng)于中間欄的寬度，此時(shí)，左欄和中間欄重合，共享它的左邊緣，如下圖。
#left {
width: 200px; /* LC width */
margin-left: -100%;
} |
然后采用相對(duì)定位的辦法將左欄定位到距右邊200PX的地方(也就是左欄的寬度)。
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
} |
現(xiàn)在左欄的位置正好是#container的左內(nèi)補(bǔ)丁。
Step 4: 給右欄定位
將右欄定位于#container的右內(nèi)補(bǔ)丁位置，只要設(shè)定右欄的負(fù)右邊界就可。
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
} |
現(xiàn)在布局中的空白區(qū)域已消失。
Step 5:最后的完善
至此，布局已基本完成，但如果瀏覽器的最小尺寸比中心寬度小，那么左列將變的很小，所以要設(shè)定個(gè)最小寬度，可惜IE現(xiàn)在還不支持。800x600沒(méi)問(wèn)題
body {
min-width: 550px; /* 2x LC width + RC width */
} |
第四步完成的代碼在IE里左欄會(huì)消失，現(xiàn)在要做的是把左欄定到它正確的位置上去。
* html #left {
left: 150px; /* RC width */
} |
內(nèi)容的邊距
我們需要給內(nèi)容一個(gè)內(nèi)補(bǔ)丁(10PX)，否則的話，文本都頂著邊。
列的總寬度等于(padding+width)。
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
} |
對(duì)IE5.x,應(yīng)該用個(gè)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 */
} |
高度自適應(yīng)
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
} |
這個(gè)代碼起源于adapted wholesale。
遺憾的是現(xiàn)在Opera還不支持#container的overflow，期待版本9。
現(xiàn)在IE還不能真正的自適應(yīng)高度，還要加下面的代碼，如果你需要#footer，可再加個(gè)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 */
} |