網上有一些解決方案，但會出現當改變視窗高度時，底部和正文重疊的bug。儘管沒有多少人會有事沒事兒的去改變視窗高度，但設計嘛，追求的就是盡善盡美。
下面是我找到的乙個比較完美的方法，來自國外的設計達人，純css，可以實現: 當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。
甚至，創造該css的人還專門成立乙個**介紹這個css底部布局方案。不知道他有沒有去申請專利
html**:
< div id="wrap">
< div id="main" class="clearfix">
< div id="content">
< /div>
< div id="side">
< /div>
< /div>
< /div>
< div id="footer">
< /div>
說明: 使用這個布局的前提，就是footer要在總的div容器之外，footer使用乙個層，其它所有內容使用乙個總的層。如果確實需要到新增其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。
網頁製作webjx文章簡介：css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的css絕對底部，只是目前個人見過的方案中比較完美的吧。
css**:
下面是主要的css**，讓你的底部可以位於視窗的最下面:
html, body, #wrap
body > #wrap
#main /* 必須使用和footer相同的高度 */
#footer
說明: 需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。
就是這麼簡單，不過還沒完。如果你的主體是使用懸浮布局，還得解決一些瀏覽器的相容問題，這裡使用的重點是為了goolge chrome。
對#main部份進行著名的clearfix hack:
.clearfix:after
.clearfix
/* hides from ie-mac \*/
* html .clearfix
.clearfix
/* end hide from ie-mac */注: 該方案測試於兩欄懸浮布局，相容各大主流瀏覽器，包括google chrome。
CSS 相對定位和絕對位置
設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素 相對於 它的起點進行移動。如果將 top 設定為 20px，那麼框將在原位...
CSS之通過定位簡單實現div絕對居中
上面是簡單 原理很簡單，即使用box來確定body的中間位置和寬高，content相對於box來定位即可實現居中。自感覺優點 相容好，不像vertical align等屬性ie不支援 定位都是用百分比，不用根據div的寬高來定位 簡單易用 用於頁面中單獨乙個居中框比較適用。缺點 每個居中的div需要...
CSS控制DIV絕對定位 相對定位的技巧
我們在網頁設計中常常會用到position屬性，裡面有5個值，分別是 absolute fixed relative static inherit。常用到的其實就是absolute和fixed。absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。fixed 生...