在專案中常常會遇到這樣的問題：頁面主要內容不足以鋪滿一個螢幕的高度，footer下面就會有白塊剩餘。 現在要實現的效果就是，在主要內容不足以鋪滿整個螢幕的情況下，footer居於螢幕低部顯示，使得整個頁面佔滿螢幕。而當主要內容高度大於整個螢幕高度的時候，footer跟隨主要內容進行顯示； 方法一： html

<div class="page">
    主要頁面
</div>
<footer>底部</footer>

css

html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page{
    box-sizing: border-box;/*為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製*/
    min-height: 100%;
    padding-bottom: 300px;
}
footer{
    height: 300px;
    margin-top: -300px;
    opacity: 0.5;
}
 

主要內容放在page內部，page最小高度為100%（注意這裡html，body高度也要設為100%）。page有個padding-bottom大小為footer的高度（按需要調整），最重要的一點page的box-sizing:border-box，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，也就是說page的padding-bottom也會設定在min-height：100%內。而footer的margin-top為負的自身高度，把自己拉到page的padding-bottom空白塊上，從而達到需求效果。 優點：簡潔明瞭，沒有冗餘的div盒子； 缺點：box-sizing:border-box的相容問題,ie7以下包括ie7不支援； 方法二： html

<div class="page-container">
    <div class="page-main">
        主要頁面 
    </div>
    <footer>底部</footer>
</div>

css

html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-container{
    position: relative;
    min-height: 100%;
}
.page-main{
    padding-bottom: 300px;
}
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 300px;
}
 

主要內容放在page-main裡面，page-container最小高度100%（注意這裡html，body高度也要設為100%），position為relative。footer的position為absolute，相對於page-container居於底部。page-main有個padding-bottom為footer的高度（根據需要調整），從而達到需求效果； 優點：相容性比較好，ie6放棄治療； 缺點：套了兩層div； 上面兩種方法都只針對底部高度固定的情況，不能解決底部高度不固定的情況，一般情況下，網站的底部都是放一些友情連結之類的東西，如果你的專案要求這些友情連結是後臺可配置的，數量不固定，導致底部高度不固定呢？好吧，除了用js來動態獲取高度然後設定底部高度以外，還有什麼用css就直接解決的好的方法麼？