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. dreamweaver中的 map怎么调用?_制作热点图像区域

    我们浏览网页时,经常看到一些图片上会出现特别的超链接,即在一张图片上有多个局部区域和不同的网页链接,比如地图链接. 这就是映射图像(Image Map),它是指一幅根据链接对象不同而被人为划分为若干指 ...

  2. 设置int、float型数据的输出格式

    设置整型输出的有效位数,比如在输出时间时时.分.秒都是两位有效数字,如果是5分钟应该输出00:05:00.需要加上头文件<iomanip> cout<<setw(2)<& ...

  3. CSS中清除浮动的方法

    CSS浮动,最早是为了达到文字环绕的效果提出的,也可以用来做布局,但是布局会产生很多问题(高度塌陷,漂浮在普通流上),会使当前标签产生上浮的效果,会影响前后标签,同样的代码在不同的浏览器的兼容性也不一 ...

  4. Spring Boot 整合 Mybatis 实现 Druid 多数据源详解

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “清醒时做事,糊涂时跑步,大怒时睡觉,独处时思考” 本文提纲一.多数据源的应用场景二.运行 sp ...

  5. java学习笔记 --- 条件,循环语句

    一.三元运算符 A:格式    比较表达式?表达式1:表达式2;   B:执行流程:    首先计算比较表达式的值,看是true还是false.    如果是true,表达式1就是结果.    如果是 ...

  6. lvm的vg扩容

    本次扩容的目的是要扩展 / 的整体容量,具体操作如下: 1.首先查看是否存在未分配的磁盘 [root@NH-Test-44 ~]# fdisk -l Disk /dev/vda: 53.7 GB, 5 ...

  7. 疯狂的 JAVA 后++

    一.x++ 所以执行完x++之后,局部变量区的x值,直接为2: iinc: 指定int型变量增加指定的值,注意是变量,我的解释是iinc直接对局部变量操作,而不是对操作栈进行操作! ★★★★ OUTP ...

  8. Weblogic虚拟目录

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  9. Tcl与Design Compiler （十三）——Design Compliler中常用到的命令（示例）总结

    本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 本文将描述在Design Compliler中常用 ...

  10. QQ第三方登录教程

    教程戳这里