美文网首页
[零碎] footer置于页面底部

[零碎] footer置于页面底部

作者: acsamson | 来源:发表于2019-04-16 15:40 被阅读0次

    footer置于底部很常用的写法, 一般就直接用absolute或者fixed来定位既可

    image

    方法一: 直接使用绝对定位或者fixed定位


    方法二: 使用margin负值


    方法三: js动态判断

    $(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");
                }
            }
            footerPosition();
            $(window).resize(footerPosition);
        });
    
    .fixed-bottom {position: fixed;bottom: 0;width:100%;}
    

    代码来自https://segmentfault.com/a/1190000004453249


    参考: https://segmentfault.com/a/1190000004453249

    相关文章

      网友评论

          本文标题:[零碎] footer置于页面底部

          本文链接:https://www.haomeiwen.com/subject/fgvbwqtx.html