js让一行页脚保持在底部

软件发布|下载排行|最新软件

当前位置：首页 → IT学院 → IT技术 →

js让一行页脚保持在底部

2020-05-12 我要评论

测了一下，还可以，在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.qb5200.com </title> 
<style> 
*{ margin:0; padding:0} 
#info{background:#33CCFF} 
#bottom{background:#FFCC00;width:100%;} 
</style> 
</head> 
<body> 
<div>

2
2
2

2
2
2
2
2
2
2
2

2
2
2
2
2

2
2
2
2
2

2
2
2
2
2

2
20000</div> 
<div>bottom</div>

<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> 
</body> 
</html>

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

相关文章

猜您喜欢

今日热门

Copyright 2022 版权所有软件发布访问手机版

声明：所有软件和文章来自软件开发商或者作者如有异议请与本站联系联系我们