【CSS】CSS經典佈局之絕對底部佈局

轉載自：CSS經典佈局之Sticky footer佈局

---

何爲Sticky footer佈局？

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

Sticky footer佈局實現

一、負 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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

！！！特別說明！！！：使用這個佈局的前提，就是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;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

PC端效果圖：

移動端效果圖：

二、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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

* {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;}

• 1
• 2
• 3
• 4
• 5
• 6

PC端效果圖：

移動端效果圖：

flex佈局結構簡單，代碼精簡。因爲flex存在着兼容性，所以在使用這種方式佈局時需要注意。

---

若不懂flex: 1;請跳轉 【CSS】由 flex: 1; 引發的思考