Sticky footer經典佈局--絕對底部佈局

原文轉載於：https://cnodejs.org/topic/56ebdf2db705742136388f71

 

何爲Sticky footer佈局？

　　咱們常見的網頁佈局方式通常分爲header（頁頭）部分,content（內容區）部分和footer（頁腳）部分。當頁頭區和內容區的內容較少時，頁腳區不是隨着內容區排布而是始終顯示在屏幕的最下方。當內容區的內容較多時，頁腳能隨着文檔流撐開始終顯示在頁面的最下方。這就是傳說中的Sticky footer佈局。

Sticky footer佈局實現

1、負 margin 佈局方式

<div class="detail"> <div class="wrapper clearfix"> <div class="title"> <h1>這裏是頭部</h1> </div> <div class="main"> <p>這裏是main content區域...</p> <p>這裏是main content區域...</p> <p>這裏是main content區域...</p> <p>這裏是main content區域...</p> </div> </div> </div> <div class="footer"> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </div>

 

！！！特別說明！！！：使用這個佈局的前提，就是footer要在總的div容器以外，footer使用一個層，其它全部內容使用一個總的層。若是確實須要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

* {margin: 0; padding: 0; text-align: center;} html,body,.detail {height: 100%;} body>.detail {height: 100%; min-height: 100%;} .main {padding-bottom: 64px;} .footer {position: relative; margin-top: -64px; height: 64px; clear: both; background-color: red;} .clearfix::after { /* 測試於兩欄懸浮佈局 */ display: block; content: "."; height: 0; clear: both; visibility: hidden; }

 

PC端效果圖：

移動端效果圖： 

2、flex 佈局方式

<header> <h1>Site name</h1> </header> <div class="main"> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> </div> <footer> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </footer>

* {margin: 0; padding: 0;} body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;} h1{font-size: 60px; text-align: center;} p{font-size: 24px; text-align: center;} .main{flex:1;} /* 若不懂請看本文末尾的連接 */ footer{background-color: red;}

PC端效果圖： 

移動端效果圖： 
 
flex佈局結構簡單，代碼精簡。由於flex存在着兼容性，因此在使用這種方式佈局時須要注意。