JS实现让页脚一直固定在页面底部

2019独角兽企业重金招聘Python工程师标准>>>

JS实现页脚在浏览器可视范围内始终置底。

如下图所示：

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JS实现让页脚一直固定在页面底部</title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style type="text/css">*{margin:0px;padding:0px;}body{font-size:12px;font-family:"微软雅黑";color:#ddd;background:#eee;}.header{width:100%;height:98px;background:#111;padding:1px 0px;color:#fff;font-size:24px;text-align:center;}.content{width:1500px;height:700px;background:#004f27;margin:0px auto;color:#fff;font-size:24px;text-align:center;}.footer{width:100%;height:50px;background:#111;color:#fff;font-size:24px;text-align:center;}</style></head><body><div class="header">头部</div><div class="content">内容区域</div><div class="footer">底部</div></body><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(window).bind("load", function() {var footerHeight = 0;var footerTop = 0;positionFooter();function positionFooter() {// 获取页脚的高度footerHeight = $(".footer").height();// 获取页脚的高度/*scrollTop() 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 */footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位if(($(document.body).height()+footerHeight) < $(window).height()) {$(".footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});}}$(window).scroll(positionFooter).resize(positionFooter);});</script></html>

转载于:https://my.oschina.net/AaronDMC/blog/790408

JS实现让页脚一直固定在页面底部相关推荐

php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将页脚固定在页面底部
感觉有些繁琐.目前简单的,是在上continer中使用min-height属性,当然没有测试兼容性. -------2016-5-9 16:17:51-- source:如何将页脚固定在页面底部
如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码 <div class="main"><div class="main-box&quo ...

JS实现让页脚一直固定在页面底部

JS实现让页脚一直固定在页面底部相关推荐

最新文章

热门文章