码迷,mamicode.com
首页 > 其他好文 > 详细

footer页面最底端展示

时间:2018-06-17 16:53:42      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:django   var   python   疑难问题   问题   href   rpo   function   width   

简单介绍

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

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

 

实际操作

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

 

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

2、添加CSS修饰

footer{}

/* 动态为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   var   python   疑难问题   问题   href   rpo   function   width   

原文地址:https://www.cnblogs.com/April-Chou-HelloWorld/p/9193040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!