javascript将页尾悬置在页面底部

需求描述：

网站的页尾常常需要被放置在底部。但是普通文档流布局的话，这个底部会随着文档流移动，在不同高度的显示器上的表现效果就不同了。这里就需要：

1.当文档高度大于可视区域高度的时候，跟随文档流布局。

2.当文档高度小于可视区域高度的时候，固定在底部。

几个知识点:

a.首先是文档高度的确定

这里使用的是document.body.offsetHeight这个属性可以获取你整个文档的高度（包括margin、body的padding、滚动条）；兼容性可以做到IE8。

b.其次是页面可视区域的大小

这里用的是document.documentElement.clientHeight这个值，这个值可以兼容到IE8（IE8会比其他的浏览器少4个像素，但是这里就不去纠结了，考虑性能方面）。

c.onresize事件

当浏览器尺寸发生变化时，这个尾部要动态的发生改变，所以需要监听这个事件。

代码:

<span style="font-size:14px;">(function() {
    window.onload = function() {
        position("需要传入的尾部id");
    }
    window.onresize = function() {
        position("需要传入的尾部id");
    };

    function position(footId) {
        var footer = document.getElementById(footId);
        var eleHeight = document.body.offsetHeight;
        var screenHeight = document.documentElement.clientHeight;
        if (eleHeight < screenHeight) {
            footer.style.position = "fixed";
            footer.style.bottom = "0";
            if (footer.offsetWidth == 0) {
                footer.style.width = "100%";
            }
        } else {
            footer.style.position = "static";
        }
    }
}());</span>

相关提示：

还有不用js处理的方法，详见这篇文章：

http://mp.weixin.qq.com/s?__biz=MjM5NzE0MjQ2Mw==&mid=404985661&idx=1&sn=a54c3efb61ed982f010822ff5bf06034&scene=23&srcid=0415gt250uRNmeT8LN2WqCQ2#rd