本文介紹了CSS Sticky Footer實現代碼，分享給大家，具體如下：
上圖所顯示的效果就是sticky Footer，當頁面主題內容不夠長時，footer定位在窗口的底部，當頁面主題內容超出窗口后，footer顯示在頁面的最底部
以下給出幾種實現方案：
1. FlexBox布局
HTML結構如下：
| <body> <div class="header">Sticky Footer</div> <div class="content"> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> </div> <div class="footer"> <p>This is footer</p> </div></body> |
主要CSS如下：
| body{ display: flex; flex-flow: column; min-height: 100vh;}.content{ flex: 1;} |
FlexBox實現就是這么簡單，實現效果也貼上來
貼圖的效果好像不太好，但是效果是實現了的哦?。。。?/p>
2. 經典套路：padding-bottom + margin-top
HTML結構如下：
| <body> <div class="wrapper clearfix"> <div class="title">Sticky Footer</div> <div class="content"> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> </div> </div> <div class="footer"> <p>This is footer</p> </div></body> |
