功能：無論將瀏覽器拖大或拉小，將頁腳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>
效果：兩DIV塊未相交時：
兩DIV塊相交時，沒有產生覆蓋現象（設置第二塊bottom為0時常有的現象）：
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像素時，垂直滾動條出現）：
推薦一個自己業余時間開發的網盤搜索引擎，360盤搜（www.360panso.com）