Sealyu

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

先說我們?yōu)槭裁磿褂玫竭@個CSS底部布局解決方案:

當做一個頁面時，如果頁面內(nèi)容很少，不足于填充一屏的窗口區(qū)域，按普通的布局，就會出現(xiàn)下面圖片中的樣子(也就是底部內(nèi)容并沒有位于窗口的底部，而留下了大量空白。

對于追未完美的設計師來說，這是不美觀的。網(wǎng)上有一些解決方案，但會出現(xiàn)當改變窗口高度時，底部和正文重疊的BUG。盡管沒有多少人會有事沒事兒的去改變窗口高度，但設計嘛，追求的就是盡善盡美。

下面是我找到的一個比較完美的方法，來自國外的設計達人，純CSS，可以實現(xiàn): 當正文內(nèi)容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現(xiàn)重疊問題。

甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個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使用一個層，其它所有內(nèi)容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼:

下面是主要的CSS代碼，讓你的底部可以位于窗口的最下面:

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* 必須使用和footer相同的高度 */

#footer {position: relative;

margin-top: -150px; /* footer高度的負值 */

height: 150px;

clear:both;}

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

就是這么簡單，不過還沒完。如果你的主體是使用懸浮布局，還得解決一些瀏覽器的兼容問題，這里使用的重點是為了Goolge Chrome。

對#main部份進行著名的Clearfix Hack:

.clearfix:after {content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac "*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

注: 該方案測試于兩欄懸浮布局，兼容各大主流瀏覽器，包括Google Chrome。

P.S:

• 網(wǎng)絡上之前比較知名的footer布局有Ryan Faits創(chuàng)造的，不過它的方法在HTML代碼中會有一個空的div層。嚴格來說，是不符合語義網(wǎng)代碼標準的。
• 另外，還有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代碼。
• 這樣一比較，上面看似簡單的純CSS，就顯得偉大許多了。

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