为了账号安全,请及时绑定邮箱和手机立即绑定

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



作者:linwene
链接:https://www.jianshu.com/p/f730e275e2c1


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消