css中的Sticky footer 佈局
阿新 • • 發佈:2018-12-17
什麼叫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了