美文网首页
footer页面最底端展示

footer页面最底端展示

作者: M_派森 | 来源:发表于2018-06-17 15:48 被阅读83次

    简单介绍

    最近搭建了一个数据统计分析的平台,然而诸多疑难问题,毕竟第一次使用Django+Python自己独立做的。幸好Google了答案,此处稍微说下页面版权展示位置的问题。

    这个版权说明都是放在最页面底端,并且页面上下左右滑动也不会影响到它的位置的,在解决之前,这个位置一直控制不好,要么在中间,要么在底端只要页面展示多了就跑到中间内容上了。

    实际操作

    1、首先在html页面添加footer标签和内容

    <footer>© 2018 曹操数据平台 | 质量控制部贡献</footer>

    2、添加CSS修饰

    footer{background-color: whitesmoke;}

    /* 动态为footer添加类fixed-bottom */

    .fixed-bottom {position: fixed;bottom: 0;width:100%;}

    3、添加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);

    });

    以上即可实现动态显示版权位置页面最底端。

    参考:

    将footer固定在页面底部的实现方法

    相关文章

      网友评论

          本文标题:footer页面最底端展示

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