js让一行页脚保持在底部- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js让一行页脚保持在底部

Javascript: 兼容firefox的文本框只能输入两位小数的数字的代码; javascript 年月日联动实现核心代码; JavaScript 图片预览效果推荐; JavaScript是否可实现多线程深入理解JavaScript定时机制; jquery 表单取值常用代码; javaScript 删除确认实现方法小结; javascript强制弹出新窗口实现代码; Js倒计时代码，当鼠标离开页面与回到页面会自动停止与开始; Div+Js实现的带阴影菜单微软以前网站曾用过; 纯CSS实现的当鼠标移上图片添加阴影效果代码; JavaScript 未知高度元素垂直居中实现代码; javascript 仿开心网好友印象功能(点击文字弹出印象框); JS+CSS实现的一种交互体验表单页面; js 效率组装字符串 StringBuffer; window.js 主要包含了页面的一些操作; 关于Aptana Studio生成自动备份文件的解决办法; javascript下arguments,caller,callee,call,apply示例及理解; HTA版JSMin（省略修饰语若干）基于javascript语言编写; CSS+Jquery实现页面圆角框方法大全; js 页面刷新location.reload和location.replace的区别小结

No. « ‹ 252 253 254 255 › »

技术文章搜索

关键字

Javascript 中的 js让一行页脚保持在底部

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 300 ::

收藏到网摘: n/a

关于document.cookie的使用javascript 多浏览器兼容的右下角广告代码（已测）

所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测了一下，还可以，在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.ruanchen.com 软晨学习网</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
2
2
2
2
2
2
2
2
2
2
20000</div>
<div id="bottom">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 全选提示:你可先修改部分代码,再按运行]

关于document.cookie的使用javascript 多浏览器兼容的右下角广告代码（已测）

Javascript 中的 js让一行页脚保持在底部

评论 (0) All