您的位置：首页 > Web前端 > JavaScript

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

2016-11-18 00:00 489 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3 JQuery JavaScript 页脚置底

相关文章推荐

新的分享

章节导航