用js让“footer”处于底部
当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》，现在来用 javascript 来实现这种效果。
基本思路
以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。
代码实现
XHTML 代码：
<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
javascript 代码：
<script language="javascript" type="text/javascript">
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>
解释一下两个重要的属性 scrollHeight 和 clientHeight：
scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关；
clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。
为了让例子效果更明显，再加上一些 CSS 代码：
*{
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}
这样，如果网页的高度小于浏览器的高度，那么 footer 部分就会定位到底部。