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. java数组、java.lang.String、java.util.Arrays、java.lang.Object的toString()方法和equals()方法详解

    public class Test { public static void main(String[] args) { int[] a = {1, 2, 4, 6}; int[] b = a; in ...

  2. javaWEB与Session

    HttpSession(*****)1. HttpSession概述  * HttpSession是由JavaWeb提供的,用来会话跟踪的类.session是服务器端对象,保存在服务器端!!!  * ...

  3. oracle查询每个表所占的空间

    查看当前用户的每个表所占的空间大小: select segment_name,sum(bytes)/1024/1024 size_M from user_extents group by segmen ...

  4. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  5. 测试一下js是否可用

      昨天刚获批通过了js权限,今天写一段小代码测试下是否可用 我用Javascript添加了 <p> <script type="text/javascript" ...

  6. 解析新浪微博表情包的一套js代码

    本文出自本人原创,转载请注明出处 /** * Created by Lemon on 2017/4/6. *//** * return 解析后的值 * analysis 参数 * obj.value: ...

  7. Gym 101257G 24 （概率+二分）

    题意: 有一道分值为sa的题,n个人比赛写这道题,按照递减的顺序给出每个人的当前分数,和每个人写不出这道题的概率,让你输出有反超现象出现的期望 思路:由于之前把题目翻译错了导致很久没有相通,后来看了别 ...

  8. redux计算器

    //简单运用redux写了一个加减乘除功能 <!DOCTYPE html><html lang="en"><head> <meta cha ...

  9. 【iOS】7.4 定位服务->3.3 地图框架MapKit 功能3：3D视图

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  10. js对象个人理解及记录

    什么是对象 对象的定义是:无序属性的集合,其属性可以包括基本值.对象或函数. var car = {};   //比如我们拿一块铁造了一辆车,这的名字叫car /建一个空对象 car.length = ...