Sticky Footer即絕對底部，是一種常用的布局方式，頁腳在內容區未超出窗口高度時一直保持在最底部顯示，而超過窗口高度時則保持在內容區最底部。

有兩種實現方法：

第一種：經典的實現方式

html

<div class="box">
     <div class="content">
         <p>內容區</p>
     </div>
</div>
<div class="footer">
     <p>頁腳</p>
</div>

css：

        html,body{
            height: 100%;
        }
        .box{
            min-height: 100%;  //將footer擠到屏幕最底下
        }
        .content {
            padding-bottom: 60px; 
        }
        .footer {
            height: 60px;
            margin-top: -60px;
        }

這種方法需要將內容區包裹在一個外層容器裏，將外層容器的最小高度設置為100%，這樣不管內容有多少，footer都將被擠在最下面，還有關鍵的一點就是要為內容區設置一個padding-bottom，這個值需要和footer的height還有margin-top保持一直，這樣footer的就可以顯示在內容底部。

第二種：flex布局

html：

    <div class="content">
        <p>內容區</p>
    </div>
    <div class="footer">
        <p>頁腳</p>
    </div>

css：

        html,body{
            display: flex;
            height: 100%;
            flex-direction: column
 
;
        }
        .content {
            flex: 1;
        }

這種實現方法更加簡便，不需要外層包裹層，利用flex的特性，當其值為1的時候會自動分配剩余可用空間，這樣只要不為footer設置flex，內容區就將占據處footer的全部空間，而且是自適應大小的，所以不必設置padding和margin。

Sticky Footer的實現