详解HTML5将footer置于页面最底部的方法(CSS+JS)
16 浏览量
2020-12-14
02:11:03
上传
评论
收藏 23KB PDF 举报
详解详解HTML5将将footer置于页面最底部的方法置于页面最底部的方法(CSS+JS)
本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下：
JavaScript:
<script type="text/javascript">
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
//网页正文全文高度
var contentHeight = document.body.scrollHeight,
//可视窗口高度，不包括浏览器顶部工具栏
winHeight = window.innerHeight;
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
CSS:
.fixed-bottom {
position: fixed;
bottom: 0;
width:100%;
}
资源评论
