在進(jìn)行網(wǎng)站建設(shè)的時(shí)候，不管是做普通的企業(yè)網(wǎng)站還是門戶類等幾乎任何類型的網(wǎng)站，我們經(jīng)?？赡苡羞@樣的一個(gè)需求，那就是我們要有一個(gè)邊欄，這個(gè)邊欄得有背景顏色，而且它的高度隨著內(nèi)容的主體高度而變。就好像下圖這樣的：

這個(gè)看上去非常容易，當(dāng)然實(shí)際上也是比較容易的；但往往大家在解決這個(gè)需求的時(shí)候要么忽略一些問題而導(dǎo)致可用性較差，要么就使用了雖然能解決，但不是特別極致的解決方案。

首先，我們要知道內(nèi)容主體區(qū)域的高度是可變的（比如文章的內(nèi)頁，高度可能隨著文章內(nèi)容的多少而變化），如果給邊欄一個(gè)具體的高度值那，若這個(gè)高度值較小，那么遇到內(nèi)容較多的時(shí)候，那么邊欄的下面就成了跟內(nèi)容區(qū)域一樣的的背景（被留白了）；反之，如果這個(gè)高度值設(shè)的足夠大，那對于大多數(shù)內(nèi)容來講，下面會被留白太多，這樣顯然是要不得的。

除此之外，我們看到有很多網(wǎng)站使用到的兩種方法，一種是給邊欄和內(nèi)容主體區(qū)域的父級標(biāo)簽給個(gè)寬度等于邊欄的背景圖片；而另外一種則是用js來動(dòng)態(tài)獲取內(nèi)容高度然后又通過dom把這個(gè)值賦給邊欄。而且前者使用得最為普遍。

而實(shí)際上有一種方式，可以不實(shí)用js，也不實(shí)用背景圖片，維護(hù)起來特別方便。那就是采用position:?absolute;我們通常在使用絕對定位的時(shí)候一般是使用一個(gè)或者兩個(gè)值，用得較多的是兩個(gè)邊距值，比如這里我們用到了top:?0和left:?0。這樣實(shí)際上還是沒能達(dá)到我們的需求，邊欄還是只有邊欄本身內(nèi)容“撐破”的高度。而實(shí)際上只要加上一個(gè)CSS屬性的值就可以實(shí)現(xiàn)我們的目標(biāo)了，那就是加上bottom:?0，這樣我們的問題就解決了。

當(dāng)然上面說的加這些東西只是針對上面效果的而言的，具體的需要根據(jù)實(shí)際變化；而且實(shí)際上可以通過這個(gè)實(shí)例得到很多其他的應(yīng)用技巧；當(dāng)然，針對這個(gè)也許還存在更好的方法。