2017-04-19 16:24:48

什么是sticky footer

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

用position实现？

如果是用position:absolute或postition:fixed实现的话，都有各自的问题：

  • position:absolute

　　　　在页面内容不够长时，可以用bottom:0达到页脚的效果；但当页面很长时，因为absolute是相对于父positioned元素，所以页面滚动时，该“footer”就不能随页面滚动保持在最下面了。

  • position:fixed

　　　　同样，fixed相对于viewport，只能保证在浏览器窗口的下方，不能保证在整个页面的最下面。

实现sticky footer的五种方法

https://css-tricks.com/couple-takes-sticky-footer/

实现sticky footer的五种方法的更多相关文章

  1. Android之数据存储的五种方法

    1.Android数据存储的五种方法 (1)SharedPreferences数据存储 详情介绍:http://www.cnblogs.com/zhangmiao14/p/6201900.html 优 ...

  2. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  3. js去掉字符串前后空格的五种方法

    转载 :http://www.2cto.com/kf/201204/125943.html 第一种:循环检查替换[javascript]//供使用者调用  function trim(s){  ret ...

  4. EntityFramework嵌套查询的五种方法

    这样的双where的语句应该怎么写呢: var test=MyList.Where(a => a.Flows.Where(b => b.CurrentUser == “”) 下面我就说说这 ...

  5. linux 清空catalina.out日志 不需要重启tomcat（五种方法）【转】

    1.重定向方法清空文件   [root@localhost logs]# du -h catalina.out  查看文件大小17M catalina.out[root@localhost logs] ...

  6. C#中得到程序当前工作目录和执行目录的五种方法

    string str="";str += "\r\n" + System.Diagnostics.Process.GetCurrentProcess().Mai ...

  7. 【转】这五种方法前四种方法只支持IE浏览器，最后一个方法支持当前主流的浏览器（火狐，IE，Chrome，Opera，Safari）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

  9. centos7防暴力破解五种方法

    什么是暴力破解,简单来说就是对一个服务器进行无数次尝试登陆,并用不同的密码进行登陆直到可以登陆成功.暴力破解的基本步骤可以分为以下几步: 1. 找到对应的linux服务器    Ip地址 2.扫描端口 ...

随机推荐

  1. 不可重入定时器Newlife.TimerX

    在.net常用的定时器类有下面三种,使用定时器时需要设定参数,如间断时间.定时器计溢出后的回调函数.延时.开始等,定时器的的主要方法有开始.终止等,不同的定时器实现上述的方法会有一些差异,本文会针对具 ...

  2. LBPL--基于Asp.net、 quartz.net 快速开发定时服务的插件化项目

    LBPL 这一个基于Asp.net. quartz.net 快速开发定时服务的插件化项目 由于在实际项目开发中需要做定时服务的操作,大体上可以理解为:需要动态化监控定时任务的调度系统. 为了实现快速开 ...

  3. 输入输出流类iostream常用函数解析

    原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5657192.html 一.成员类型 1. ios::fmtflags: 格式标志,常用来设置输出的 ...

  4. python自动化框架(unnitest+selenium+htmlreport)

    上一篇零零散散的写了一些python unnitest的一些知识,这里讲讲我在实际中使用到的自动化测试框架,算是上篇记录的补充!其实我觉得:什么框架都无所谓,关键是当如果用你的框架发现了bug,能尽量 ...

  5. Moving to Express 4

    http://expressjs.com/guide/migrating-4.html Moving to Express 4 Overview Express 4 is a breaking cha ...

  6. linux 下的 mkfifo、exec 命令使用

    MKFIFOSection: User Commands (1)Updated: 1998年11月Index Return to Main Contents  NAME(名称)mkfifo - 创建F ...

  7. Oracle子查询中any、some、all之间的区别

    用some,any和all对子查询中返回的多行结果进行处理. 下面我们来简单介一下这几个关键词的含义. * Some在此表示满足其中一个的意义,是用or串起来的比较从句. * Any也表示满足其中一个 ...

  8. selenide小白教程

    目的: 趁着清明假期临近把手头工作整理了一下,前段时间老大给了一个selenide研究的任务,虽然对selenium的应用比较熟悉,但是以前一直没怎么研究过其他衍生的技术,在研究过程中发现国内好的帖子 ...

  9. opencv配置（win10+VS2015+opencv3.1）

    Step 1:准备工作 a.win10 b.vs2015 c.opencv3.1[从http://opencv.org/downloads.html下载] Step 2.开始安装 a. 双击openc ...

  10. 【转】air调用windows自带的虚拟键盘

    原文:http://bbs.9ria.com/blog-73243-19560.html 最近在做一个东西,需要用到虚拟键盘.刚开始准备用as3开发一套,结果突然想起来windows有个自带的虚拟键盘 ...