将页脚保持在页面的底部——Javascript+Css实现
2012-03-05 22:52
555 查看
功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部
1、将Javascript代码和DIV/CSS代码写在同一个文件里:
效果:两DIV块未相交时:
两DIV块相交时,没有产生覆盖现象(设置第二块bottom为0时常有的现象):
2、将Html、DIV/CSS、Javascript分别写在不同的文件里:
html文件index.html(其中调用了index.js和index.css):
index.css文件:
注意:此处最好给出top和bottom两个DIV块的高度,便于javascript代码计算,有的情况下(比如top块中包含其它DIV块时,可能会造成有的浏览器下计算不准确)
index.js文件:
3、如果想底栏DIV块距离其之上最后一个DIV块的最小距离为A(假设为150px),那么只需修改index.js文件即可,修改如下:
效果图(两个DIV块之间距离小于150像素时,垂直滚动条出现):
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像素时,垂直滚动条出现):
相关文章推荐
- Javascript让页脚保持在未满屏页面的底部
- DIV+CSS:页脚永远保持在页面底部
- CSS + DIV 让页脚始终保持在页面底部
- CSS实例:让页脚保持在未满屏页面的底部
- css让页脚始终在底部不论页面内容多少
- 纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
- Css Sticky Footer将页脚固定在页面底部
- 怎样保持页脚始终在页面底部无论页面几屏或是页面不足一屏
- 如何将页脚固定在页面底部(多种方法实现)
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
- JS实现让页脚一直固定在页面底部
- Javascript和CSS实现页面多种风格的实时替换
- CSS+JavaScript实现页面不同布局的切换
- css让footer永远保持在页面底部
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
- 页脚最小高度100%保持在页面底部的布局方法
- css让页脚始终在底部不论页面内容多少
- CSS实现footer一直在页面底部
- div footer标签css实现位于页面底部固定
- 如何将页脚固定在页面底部(多种方法实现)