前端开发中，教你如何用JS动态实现页脚

最近，项目中需要给每个页面加入页脚，也就是一个网站由某某某公司开发什么的把，如下图，实现功能：出现纵滚动条时，页脚在页面内容的最下面；不出现纵滚动条时，固定在窗口的最最下面

网上也有许多用CSS布局来实现页脚的，但是任然不够灵活，可能页面稍微变化下大小、比例、屏幕变化下分辨率什么的，这个CSS的布局可能就不起作用了，js才是万能的~

简单介绍下js设置页脚的形式

1、写一个共同的footer.jsp画面，可以用其他jsp去include

以下是我写的代码，其中红框位置是需要特别注意的地方：

2、需要调用footer.jsp的页面，如下截图

其中，重点部分用红框标出，实现步骤

（1）、include footer.jsp页脚，页脚初始化的时候调用setFooter()一次

（2）、在window大小变化，或者是滚动条滑动时，都会相应setFooter()方法

这样就可以实现动态设置页脚的位置了

3、实现GIF：

题外话

1、算出滚动条的宽度：

$("body").outerWidth() + ";" + $(window).width()

2、得到画面组件的各种宽、高：

alert($(window).height()); //浏览器当前窗口可视区域高度

alert($(document).height()); //浏览器当前窗口文档的高度

alert($(document.body).height());//浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度

alert($(document).width());//浏览器当前窗口文档对象宽度

alert($(document.body).width());//浏览器当前窗口文档body的高度

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin