JS+Css 实现页脚DIV块始终保持在页面底部的方法

要实现的功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部
1、将Javascript代码和DIV/CSS代码写在同一个文件里:经测试代码如下:

<!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>让页脚保持在未满屏页面的底部</title>
<!--DIV块的CSS-->
<style type=text/css>
*{margin:0;padding:0;}
#top{background:#33CCFF;text-align:center;}
#bottom{background:#FFCC00;text-align:center;width:100%;}
</style>

</head>

<body>
<div id=top>top</div>
<div id=bottom>bottom</div>
<!--javascript代码,之所以写在后面,是为了等完全加载top和bottom的DIV块后,便于代码读取相关信息-->
<script language=javascript type=text/javascript>
function calcDistance(){
var topHeight = document.getElementById(top).scrollHeight;
var bottomHeight = document.getElementById(bottom).scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById(bottom);
if((topHeight + bottomHeight) < allHeight){
bottom.style.position = absolute;
bottom.style.bottom = 0;
}else{
bottom.style.position = ;
bottom.style.bottom = ;
} 
setTimeout(function(){calcDistance();},10);
}
calcDistance();
</script>

</body>
</html>
2、将Html、DIV/CSS、Javascript分别写在不同的文件里:html文件index.html(其中调用了index.js和index.css):

<!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>让页脚保持在未满屏页面的底部</title>
<link href=index.css rel=stylesheet type=text/css />
<script type=text/javascript language=javascript src=index.js></script>
</head>

<body>
<div id=top>top</div>
<div id=bottom>bottom</div>
<script language=javascript type=text/javascript>
calcDistance();
</script>
</body>
</html>
index.css文件:

@charset utf-8;
/* CSS Document */
*{
    margin:0;
    padding:0;
}
#top{
    background:#33CCFF;
    text-align:center;
}
#bottom{
    background:#FFCC00;
    text-align:center;
    width:100%;
}
注意:此处最好给出top和bottom两个DIV块的高度,便于javascript代码计算,有的情况下(比如top块中包含其它DIV块时,可能会造成有的浏览器下计算不准确) index.js文件:

// JavaScript Document
function calcDistance(){
var topHeight = document.getElementById(top).scrollHeight;
var bottomHeight = document.getElementById(bottom).scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById(bottom);
if((topHeight + bottomHeight) < allHeight){
bottom.style.position = absolute;
bottom.style.bottom = 0;//设置距底部距离时如果用数字apx出错,则试试apx
}else{
bottom.style.position = ;
bottom.style.bottom = ;
} 
setTimeout(function(){calcDistance();},10);
}
3、如果想底栏DIV块距离其之上最后一个DIV块的最小距离为A(假设为150px),那么只需修改index.js文件即可,修改如下:

// JavaScript Document
function calcDistance(){
var topHeight = document.getElementById(top).scrollHeight;
var bottomHeight = document.getElementById(bottom).scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById(bottom);
if((topHeight + bottomHeight + 150) < allHeight){
bottom.style.position = absolute;
bottom.style.bottom = 0;
bottom.style.top = ;
}else{
bottom.style.position = relative;
bottom.style.bottom = ;
bottom.style.top = 150px;//距离上一个DIV块150像素,如果用150px达不到想要的结果,则试试150(去掉px)
} 
setTimeout(function(){calcDistance();},10);
}
效果图(两个DIV块之间距离小于150像素时,垂直滚动条出现):

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)