页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容页脚保持在底部

js让一行页脚保持在底部

发布：dxy 字体：[增加减小] 类型：转载

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

测了一下，还可以，在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 全选提示:你可先修改部分代码,再按运行]

Tags：js 页脚底部

百度中搜索更多的关于js让一行页脚保持在底部内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：CSS也可以把IE6弄死
下一篇文章：JavaScript的9个陷阱及评点分析

文章评论

共有位脚本之家网友发表了评论我来说两句

js让一行页脚保持在底部

文章评论

同类文章

最近更新

热点排行

js让一行页脚保持在底部

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行