頁面內容不足以鋪滿屏幕高度時，footer居底顯示

在項目中常常會遇到這樣的問題：頁面主要內容不足以鋪滿一個屏幕的高度，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就直接解決的好的方法么？