什麼叫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了