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

 *                 将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. linux下tar的使用方法

    1.仅打包 tar -cvf hello.tar hello (输出文件大小为10240) 2.打包后压缩成gzip压缩格式 tar -czvf hello.tar.gz hello (输出文件大小为 ...

  2. [Network Architecture]DPN（Dual Path Network）算法详解(转)

    https://blog.csdn.net/u014380165/article/details/75676216 论文:Dual Path Networks 论文链接:https://arxiv.o ...

  3. from: can't read /var/mail/xxx 解决方法

    在执行一个发包脚本的时候,遇到了如下问题: from: can't read /var/mail/scapy.all 原因:脚本是没有问题的,但它并不是可以被python执行的可执行文件. 解决方法: ...

  4. redis_port.py

    !/usr/bin/env python import os import json import simplejson as json t=os.popen("""su ...

  5. 通过SSH key获取GitHub上项目，导入到IDEA中

    1.在Windows上安装Git 在Windows上使用Git,可以从Git官网直接下载安装程序,然后按默认选项安装即可 安装完成后,在开始菜单里找到“Git”->“Git Bash”,或者在文 ...

  6. 机器学习经典书籍&论文

    原文地址:http://blog.sina.com.cn/s/blog_7e5f32ff0102vlgj.html 入门书单 1.<数学之美>PDF6 作者吴军大家都很熟悉.以极为通俗的语 ...

  7. 自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也 ...

  8. Kali之aircrack-ng

    本机装好设备及驱动 电脑本机装好Realtek RTL8187 Wireless驱动连接好USB无线驱动 把设备转接给虚拟机 win+R,启动VMware USB Arbitration Servic ...

  9. RabbitMQ消息队列（九）RPC开始应用吧

    一 简单应用 RPC——远程过程调用,通过网络调用运行在另一台计算机上的程序的函数\方法,是构建分布式程序的一种方式.RabbitMQ是一个消息队列系统,可以在程序之间收发消息.利用RabbitMQ可 ...

  10. 分析器错误信息: 未能加载类型“xxx.Global”。

    Global.asax错误 分析器错误 说明: 在分析向此请求提供服务所需资源时出错.请检查下列特定分析错误详细信息并适当地修改源文件. 分析器错误信息: 未能加载类型“xxx.Global”. 源错 ...