相對完美的CSS絕對底部

css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的css絕程式設計客棧對底部，只是目前個人見過的方案中比較完美的吧。

css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的css絕對底部，只是目前個人見過的方案中比較完美的吧。

先說我們為什麼會使用到這個css底部布局解決方案:

當做乙個頁面時，如果頁面內容很少，不足於填充一屏的視窗區域，按普通的布局，就會出現下面中的樣子(也就是底部內容並沒有位於視窗的底部，而留下了大量空白。

對於追未完美的設計師來說，這是不美觀的。網上有afzxph一些解決方案，但會出現程式設計客棧當改變視窗高度時，底部和正文重疊的bug。儘管沒有多少人會有事沒事兒的去改變視窗高度，但設計嘛，追求的就是盡善盡美。

下面是我找到的乙個比較完美的方法，來自國外的設計達人，純css，可以實現: 當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。

甚至，創造該css的人還專門成立乙個**介紹這個css底部布局方案。不知道他有沒有去申請專利:)

html**:

說明:使用這個布局的前提，就是程式設計客棧footer要在總的div容器之外，footer使用乙個層，其它所有內容使用乙個總的層。如果確實需要到新增其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

css**:

下面是主要的css**，讓你的底部可以位於視窗的最下面:

html, body, #wrap

body > #wrap

#main /* 必須使用和footer相同的高度 */

#footer

說明:需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。

就是這麼簡單，不過還沒完。如果你的主體是使用懸浮布局，還得解決一些瀏覽器的相容問題，這裡使用的重點是為了goolge chrome。

對#main部份進行著名的clearfix hawww.cppcns.comck:

.clearfix:after

.clearfix

/* hides from ie-mac \*/

* html .clearfix

.clearfix

/* end hide from ie-mac */注: 該方案測試於兩欄懸浮布局，相容各大主流瀏覽器，包括google chrome。

p.s:網路上之前比較知名的footer布局有 ryan faits 創造的，不過它的方法在html**中會有乙個空的div層。嚴格來說，是不符合語義網**標準的。

另外，還有一篇 exploring footers article from a list apart ，但使用了一些j**ascript**。

這樣一比較，上面看似簡單的純css，就顯得偉大許多了。

ok, 沒有了。如果沒看懂，具體的使用方法和說明可以到原站檢視。

本文標題: 相對完美的css絕對底部

本文位址: