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. JavaWeb之JSP技术总结

    刚接触JSP技术的时候让我想起了在大学学的Asp+VBScript,记得当时我还用aspstudy做了一个小的新闻发布系统作为期末作品,也正是在那时候在卢哥卢老师的指导下走向编程的道路,对编程越来越感 ...

  2. Hibernate写配置文件无提示信息解决

    把Hibernate的相关jar包引入工程后,在配置hibernate.cfg.xml时没有提示信息,对于开发人员来说,那么多标签,标签有那么多属性,全部都记住显然是不可能的,遇到这种情况是很头疼的事 ...

  3. 适用MySQL Migration Toolkit 1.0 将oracle迁移到mysql中遇到的问题

    这里主要说一下我在适用中碰到的问题,主要过程参考 http://www.cnblogs.com/duwenlei/p/3520759.html. 首先启动MySQLMigrationTool.exe ...

  4. linux使用LVM合并硬盘

    目的将两块空硬盘合并为"一块",挂载到指定目录下,达到在一个目录使用2块硬盘所有空间的效果.条件硬盘1 /dev/sdb 硬盘2 /dev/sdc方法创建pvpvcreate /d ...

  5. C++实现四叉树

    什么是四叉树? 四叉树可以有效解决这个问题. 四叉树每一层都把地图划分四块,根据地图尺寸来决定树的层数,层数越大划分越细. 但需要对某一范围的单位筛选时,只需要定位到与范围相交的树区域,再对其区域内的 ...

  6. js实现哈希表（HashTable）

    在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子. 第一部分:相关知识点 属性的枚举: var person = { ...

  7. 性能调优之SQL优化

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...

  8. 老李分享：jvm结构简介 1

    老李分享:jvm结构简介     poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  9. 达到工业使用质量级别的类似于QQ截屏的软件

    到网上查找截屏发现基本都是一些小孩子的初级玩意,功能强大一点的又没有源代码所以自己花了三四天时间写了一个能达到工业使用质量级别的截图控件. 优点:1.代码量小只有1500行代码 2.结构清晰简单极易于 ...

  10. Uva 11029 Leading and Trailing (求n^k前3位和后3位）

    题意:给你 n 和 k ,让你求 n^k 的前三位和后三位 思路:后三位很简单,直接快速幂就好,重点在于如何求前三位,注意前导0 资料:求n^k的前m位 博客连接地址 代码: #include < ...