takeasy

your imagination is my power

網頁設計技巧：CSS固定footer

by Chris 2009/11/24

網頁設計技巧：CSS固定footer


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


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


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



HTML代碼：
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
使用這個佈局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有內容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

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值，需要保持一致。

瀏覽器的兼容：
對#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。


  • 網絡上之前比較知名的footer佈局有Ryan Faits創造的，不過它的方法在HTML代碼中會有一個空的div層。嚴格來說，是不符合語義網代碼標準的。
  • 另外，還有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代碼。

原站：CSS Sticky Footer

TOP
 

0 留言:

發佈留言

訂閱： 發佈留言 (Atom)