将页脚保持在页面的底部—

功能：无论将浏览器拖大或拉小，将页脚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 Documentfunction 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 Documentfunction 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）

转载于:https://www.cnblogs.com/eczhou/archive/2012/03/05/2381110.html

将页脚保持在页面的底部——Javascript+Css实现相关推荐

前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码 <div class="main"><div class="main-box&quo ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将页脚固定在页面底部
感觉有些繁琐.目前简单的,是在上continer中使用min-height属性,当然没有测试兼容性. -------2016-5-9 16:17:51-- source:如何将页脚固定在页面底部
CSS实现页脚始终在页面底部
说明最近在布局自己的博客系统,我是想练练手把时下比较流行的前后端技术串起来.同时,我会把设计和编码过程中遇到的问题或值得分享的技术点.实现方式做下总结,记录下来.本篇就是第一篇,个人能力有限,不足之 ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
html5页脚最低下,页面底部或内容的页脚，以较低者为准
Ryan Fait的粘性页脚非常好,但我发现它的基本结构缺乏*. Flexbox版本如果你足够幸运,你可以使用flexbox而不需要支持旧的浏览器,粘性页脚变得非常简单,并支持动态大小的页脚. 使用 ...
php架在底部页面,将页脚固定在页面底部的CSS实战
页脚的位置问题网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大 ...
html图片怎么放在页眉的中心,如何将HTML页眉和页脚添加到页面？
一般来说,禁止在onStartPage()事件中添加内容.禁止在onEndPage()中向文档对象添加内容.您应该使用PdfWriter,NOT文档在onEndPage()方法中添加页眉和页脚.另外: ...

将页脚保持在页面的底部——Javascript+Css实现

将页脚保持在页面的底部——Javascript+Css实现相关推荐

最新文章

热门文章