/*********************************************************************

 *                 将HTML的页脚固定在屏幕下方

 * 说明：

 *     处理的方法好像是比较多的，个人还是比较倾向于用JS进行处理。

 *

 *                                   2017-8-25 深圳 龙华樟坑村 曾剑锋

 ********************************************************************/

一、参考文档：

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

        https://segmentfault.com/a/1190000004453249

二、采用代码：

    . HTML：

        <body>

            <header>header</header>

            <main>main content</main>

            <footer>footer</footer>

        </body>

    . CSS：

        html,body{margin:;padding: ;}

        header{background-color: #ffe4c4;}

        main{background-color: #bdb76b;}

        footer{background-color: #ffc0cb;}

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

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

    . 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);

        });

将HTML的页脚固定在屏幕下方的更多相关文章

  1. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  2. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  3. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  4. html页脚固定在底部的方法

    <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; paddi ...

  5. 粘性页脚 Sticky Footer 最佳方式

    前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手. 粘性页脚:即使没有足够的内容填充页面,也要将页脚固定到窗口的底部. <!DOCTYPE htm ...

  6. C# 给现有PDF文档添加页眉、页脚

    概述 页眉页脚是一篇完整.精致的文档的重要组成部分.在页眉页脚处,可以呈现的内容很多,如公司名称.页码.工作表名.日期.图片,如LOGO.标记等.在之前的文章中介绍了如何通过新建一页空白PDF页来添加 ...

  7. HTML设置固定页脚飘浮

    Css /* 页脚 */.footSty{bottom: 0pt; margin: 0pt; position: fixed; width: 100%; z-index: 10 ! important ...

  8. JQuery Mobile - 固定住页面和页脚

    在点击页面空白时候,页眉和页脚会隐藏,在页眉和页脚加入以下代码就可以了: data-tap-toggle ="false" 例子: <div data-role=" ...

  9. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

随机推荐

  1. 快速升级openwrt的linux内核版本

    一.分析 要升级openwrt的linux内核版本,关键是要制作内核配置文件 二.内核配置文件制作方法 2.1当前openwrt对应的某个开发板有对应的内核配置文件,比如此时的openwrt的linu ...

  2. [BZOJ2282]消防

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  3. Idea 切换git账号

    重置一下账号设置,再次执行拉取或推送会提示重新输入账号密码 进入项目根目录执行:git config --system --unset credential.helper

  4. 爬虫之JSON案例

    糗事百科实例: 爬取糗事百科段子,假设页面的URL是 http://www.qiushibaike.com/8hr/page/1 要求: 使用requests获取页面信息,用XPath / re 做数 ...

  5. 初识numpy的多维数组对象ndarray

    PS:内容来源于<利用Python进行数据分析> 一.创建ndarray 1.array :将一个序列(嵌套序列)转换为一个数组(多维数组) In[2]: import numpy as ...

  6. Ubuntu+apache安装redmin

    公司要迁移redmin,本来以为是一个很简单的项目,想不到整整搞了一天加一个晚上. 首先是对ruby的安装不熟悉,现在明白了ruby的安装顺序是先安装rvm版本管理,然后用rvm安装ruby,安装好后 ...

  7. grafana二次开发

    grafana官方地址: https://github.com/grafana/grafana 开发文档:http://docs.grafana.org/project/building_from_s ...

  8. 在php中define和const定义常量的区别

    define和const都可以用来定义常量,但是const定义常量的时候大小写敏感,而define可以通过设置第三个参数为true的时候来取消大小写敏感! 如图: 引用地址:点这里

  9. C#错误的面试题

    你面试的时候是不是碰到这样的问题 String s = new String("xyz");创建了几个String Object? ,对于这个问题,我之前也一直以为是对的,这样写是 ...

  10. vue-router的一个小实例

    非2.0的 vue2.0还有vue-router2.0的改变还是挺大的 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于 ...