首页 > 网络编程 > JavaScript > javascript技巧 > 页脚保持在底部

js让一行页脚保持在底部

2008-04-11 19:46:46 作者：

所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；

测了一下，还可以，在IE6、IE7、FIREOFX等都没有问题！窗口缩小时也没有问题！

<script language="JavaScript" type="text/javascript"> 
function test(){ 
 var infoHeight = document.getElementById("info").scrollHeight; 
 var bottomHeight = document.getElementById("bottom").scrollHeight; 
 var allHeight = document.documentElement.clientHeight; 

 var bottom = document.getElementById("bottom"); 
 if((infoHeight + bottomHeight) < allHeight){ 
  bottom.style.position = "absolute"; 
  bottom.style.bottom = "0"; 
 }else{ 
  bottom.style.position = ""; 
  bottom.style.bottom = ""; 
 }  

 setTimeout(function(){test();},10); 
} 
test(); 
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.jb51.net 脚本之家</title> 
<style> 
*{ margin:0; padding:0} 
#info{background:#33CCFF} 
#bottom{background:#FFCC00;width:100%;} 
</style> 
</head> 
<body> 
<div id="info">

2
2
2

2
2
2
2
2
2
2
2

2
2
2
2
2

2
20000</div> 
<div id="bottom">bottom</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]