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

2019-03-28 11:02:19 1641浏览

本篇文章扣丁学堂HTML5培训小编给喜欢HTML5开发技术的小伙伴们分享一下HTML5开发技术：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%;
}

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

【扫码进入HTML5VIP免费公开课】【扫码进入HTML5进阶VIP免费公开课】

【扫码进入HTML5前端开发VIP免费公开课】 【扫码进入前端H5架构师进阶VIP体验课】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 HTML5培训班前端H5架构师进阶 HTML5公开课

上一篇 3月28日前端H5架构师进阶VIP体验课之Vue源码你最关心的是什么? 下一篇扣丁学堂HTML5培训简述HTML5如何实现签到功能

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

热门专区

课程推荐