功能描述:
当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部。
但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。
(使用jQuery实现该功能将更加方便快捷)
如图:
图片来源于互联网
HTML部分:
<html>
<body>
<div class="main-content">主要内容</div>
<footer>页脚</footer>
</body>
</html>
JavaScript部分:
此处需要引入jQuery
var documentHeight = $(document.body).outerHeight(true); //获取网页的真实高度
var windowHeight = $(window).height(); //获取当前浏览器窗口高度
if (documentHeight < windowHeight) { //当网页高度小于浏览器窗口高度
$(".main-content").height(windowHeight - documentHeight + $(".main-content").height()); //给主要内容元素补上多出来的高度
}
实战效果:
图片来源于作者
网友评论