CSS-設置Footer始終在頁面底部

Footer顧名思義頁腳，如果內容多的時候在底部時感官很好，但是當內容變少（無法撐開一屏的時候）footer不固定在底部，影響美觀，對於已經從事前端工作的工作的來說應該是比價工作中入門級別的問題了，由於本人前端水平有限，耗費一點時間最后通過負邊距實現了這個簡單的功能，代碼如下:

    <div class="wrapper">
        <p>博客地址:http://www.cnblogs.com/xiaofeixiang/</p>
        <div class="replace"></div>
    </div>
    <div class="footer">
       博客園-FlyElephant
    </div>

設置CSS:

    * {
        margin: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    .wrapper {
        min-height: 100%;
        height: 100%;
        margin: 0 auto -202px;//通過負邊距隱藏replace
    }
    
    .footer,
    .replace {
        height:200px;//設置高度一致
    }
    
    .footer {
        border: 1px solid #6AC5AC;
    }

　無論頁面內容長短可以滿足開發需求~