h5封装去底部_详解HTML5将footer置于页面最底部的方法(CSS+JS)

本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下：

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);

});

CSS:

.fixed-bottom {

position: fixed;

bottom: 0;

width:100%;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。