今天要說的是前端開發過程中的一個小技巧，沒有很大的技術含量，但在前端開發過程中經常會遇到。當頁面內容很多時，footer會在底部，但當頁面內容很少時，如何使footer始終在底部咧？

1.HTML結構

我一般是把footer寫在footer標籤裡面

<footer>

//footer相關程式碼

</footer>

2必要CSS樣式

html,body {//保證內容不足時，撐開頁面高度；
    height:100%;
}
footer {//保證底部的寬度為100%；
    width: 100%;
}
 

3，jQuery程式碼

先定義一個名為setFooter的函式，用來設定底部footer位置

/*設定底部footer位置*/

function setFooter() {

    var body_height = $(document.body).height()//獲取body的高度

    var window_height = $(window).height()//獲取瀏覽器可視區域的高度

    var footer_height = $("footer").height()//獲取footer的高度

    if(body_height < window_height){

        $("footer").css("position","absolute");

        $("footer").css("bottom","0px");

        $("footer").css("margin-top",-footer_height);//保證不遮蓋上方內容

    }else{

        $("footer").css("position","relative");

    };

}
 

然後分別在頁面改變大小和載入時呼叫setFooter()方法，注意一定要放在load事件而不是ready事件中，因為ready事件只加載了DOM結構，圖片之類的都還沒載入，此時獲取的body的高度是不準確的。

/*監聽視窗大小改變*/

$(window).resize(function(){

    /*設定底部footer位置*/

    setFooter();

})

/*載入*/

$(window).load(function(){

  /*設定底部頁尾位置*/

    setFooter();

});

這樣就可以使Footer始終保持在頁面底部了。