美文网首页
[零碎] 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置于页面底部

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

  • Sticky-footer 布局

    在一般的页面中,footer应该是置于内容底部,如果内容高度不足,也应该让footer紧贴底部 demo 使用fl...

  • footer置于页面最底部的方法

    首先你需要判断你的footer是固定高度还是任意高度的,因为二者的方法有所却别, 现在先来说情形一,footer高...

  • CSS Footer固定底部处理

    Footer应用场景 自适应内容高度展示在页面最底部 固定于浏览器窗口底部 Footer 自适应内容高度展示在页面...

  • HTML的footer置于页面最底部的方法

    方法一:footer高度固定+绝对定位 效果: image.png 方法二:footer高度固定+margin负值...

  • CSS方案总结

    一、Sticky Footer效果 无论页面内容高度如何变化,footer始终在页面底部的固定位置 二、垂直居中 ...

  • flex常用布局

    Sticky Footer 当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域...

  • Sticky footer 页面底部

    Sticky footer:页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。...

  • 前端命名

    一、HTML文件命名 header.html----头部页面 footer.html------底部页面 user...

  • 常见CSS布局

    实现底部footer 外部有一个wrapper容器,要min-height:100%;撑满页面高度。 footer...

网友评论

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

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