什麼叫Sticky footer 佈局呢？

我們所見到的大部分網站頁面，都會把一個頁面分為頭部區塊、內容區塊和頁尾區塊，當頭部區塊和內容區塊內容較少時，頁尾能固定在螢幕的底部，而非隨著文件流排布。當頁面內容較多時，頁尾能隨著文件流自動撐開，顯示在頁面的最底部，這就是Sticky footer佈局。

一般網上會推薦幾種方法，但經過親身實踐，我發現還是負margin佈局方式比較實用，相容性最好

它的佈局是：

     <div class="wrapper-sticky clearfix-sticky">
	    <div class="content-sticky">
	      	/*main部分*/
	    </div>  
	</div>
	<div class="footer-sticky">
	    /*footer部分*/
	</div>
 

css：

/* Sticky footer 佈局 */
.clearfix-sticky{
     display: inline-block;
}
.clearfix-sticky:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
html, body, .wrapper-sticky{
     height: 100%;   /*為了 這個100%能夠生效 ，父級必須也要設height: 100%;*/
}
.wrapper-sticky {
     width: 100%;/*   此處加width: 100%;是因為.clearfix-sticky{display: inline-block;}的設定影響了佈局  */
     height: auto; 
     min-height: 100%;
}
.content-sticky {
    padding-bottom: 120px; /* 必須使用和footer相同的高度 */
}  
.footer-sticky {
    position: relative;
    margin-top: -120px; /* footer高度的負值 */
    height: 120px;
    clear:both;
}
 

這樣就OK了