在做网站的时候，往往会遇到一篇网页的内容不能够完全填充整个浏览器的问题，此时，网页的页脚会紧随上文的内容，用图来说明如下：
但是我们所需要的效果是：
因此，我们需要用JS对页面进行调整。
我们知道，浏览器中可视域的高度可以用DOM中的document.documentElement.clientHeight获取，而整个body对象的高度可以用DOM中的document.body.clientHeight获取，所以我们在之前需要对两个高度进行一次判断。
HTML代码片段如下:
<html>
<head>
<title>
页面Footer调整
</title>
</head>
<body>
<div id="header" class="class-header"></div>
<div id="content" class="class-content"></div>
<div id="footer" class="class-footer"></div>
</body>
</html>
JS代码片段如下：
<script type="text/javascript" >
if (document.body.clientHeight < document.documentElement.clientHeight) {
/*如果body没有填充完整个浏览器时，也就是页面没有出现滚动条时，修改footer为绝对定位，并距底端为0px*/
document.getElementById("footer").style.position = "absolute"; //把footer定义为绝对定位
document.getElementById("footer").style.bottom = "0px"; //把footer距页面底端设置为0px
} else {
/*如果body的高度超过了浏览器可视域的高度，也就是页面出现了滚动条，只需按照原来的布局，设置footer为相对定位即可*/
document.getElementById("footer").style.position = "relative";
}
</script>
如此，则问题影刃而解了。
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
