Footer置于页面底部的技巧

今天要说的是前端开发过程中的一个小技巧，没有很大的技术含量，但在前端开发过程中经常会遇到。当页面内容很多时，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始终保持在页面底部了。