CSS Sticky Footer: 完美的CSS絕對底部

標籤：des   blog   http   使用   os   strong   io   問題   

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

<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進行絕對位置。

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。