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

人气：683 时间：2018-09-14

这篇文章主要为大家详细介绍了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像素时，垂直滚动条出现）：

本文来自：http://www.q1010.com/174/28-0.html

注：关于JS+Css 实现页脚DIV块始终保持在页面底部的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：页面底部

您可能感兴趣的文章

上一篇：返回列表

下一篇：JavaScript 获取指定cookie值的方法