美文网首页
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页面最底端展示

    简单介绍 最近搭建了一个数据统计分析的平台,然而诸多疑难问题,毕竟第一次使用Django+Python自己独立做的...

  • CSS Footer固定底部处理

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

  • sticky footer的实现

    需求 实现footer永远在浏览器窗口的底部。当页面内容超过一屏时,在内容的最底端;当页面内容少于一屏时,foot...

  • footer的各种写法

    ** footer放置的最好情况:**1.页面内容少,无法撑开,在可视窗口最底部 2.页面内容多,在页面最底部 c...

  • HTML+CSS底部footer两种固定方式

    网页常见的底部栏(footer)目前有两种: 一、永久固定,不管页面的内容有多高,footer一直位于浏览器最底部...

  • CSS方案总结

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

  • flex常用布局

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

  • CSS页面底部固定的6种方法,你确定不想学?

    当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难...

  • CSS多种方法实现页面底部固定

    当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难...

  • 关于页面的头尾固定中间高度自适应的小结

    实现的效果:页面分为header、container、footer三个部分;header、footer固定,中间部...

网友评论

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

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