扣丁学堂HTML5培训浅谈HTML5将footer置于页面最底部的方法

本篇文章扣丁学堂HTML5培训小编给喜欢HTML5开发技术的小伙伴们分享一下HTML5开发技术：HTML5将footer置于页面最底部的方法(CSS+JS)，文中会有详细的代码列出供大家参考，希望对小伙伴们有帮助。

HTML5培训

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%;
}

最后想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发视频，HTML5培训后的前景无限，行业薪资和未来的发展会越来越好的，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

H5进阶课程：https://ke.qq.com/course/387348?flowToken=1008605【扫码进入前端H5架构师进阶VIP体验课】

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间