实现sticky footer的五种方法
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的五种方法的更多相关文章
- Android之数据存储的五种方法
1.Android数据存储的五种方法 (1)SharedPreferences数据存储 详情介绍:http://www.cnblogs.com/zhangmiao14/p/6201900.html 优 ...
- Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次
[请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...
- js去掉字符串前后空格的五种方法
转载 :http://www.2cto.com/kf/201204/125943.html 第一种:循环检查替换[javascript]//供使用者调用 function trim(s){ ret ...
- EntityFramework嵌套查询的五种方法
这样的双where的语句应该怎么写呢: var test=MyList.Where(a => a.Flows.Where(b => b.CurrentUser == “”) 下面我就说说这 ...
- linux 清空catalina.out日志 不需要重启tomcat(五种方法)【转】
1.重定向方法清空文件 [root@localhost logs]# du -h catalina.out 查看文件大小17M catalina.out[root@localhost logs] ...
- C#中得到程序当前工作目录和执行目录的五种方法
string str="";str += "\r\n" + System.Diagnostics.Process.GetCurrentProcess().Mai ...
- 【转】这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML实现页面自动跳转的五种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...
- centos7防暴力破解五种方法
什么是暴力破解,简单来说就是对一个服务器进行无数次尝试登陆,并用不同的密码进行登陆直到可以登陆成功.暴力破解的基本步骤可以分为以下几步: 1. 找到对应的linux服务器 Ip地址 2.扫描端口 ...
随机推荐
- 基于AGS JS开发自定义贴图图层
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩 ...
- 【树莓派】Linux自动配置IP
由于需要配置多台树莓派设备,但需要将IP配置为静态IP,而一台一台手动执行比较慢,所以写了一份脚本,sudo 执行即可. 将下面内容复制在家目录下,命名为auto.sh 然后执行 sudo sh au ...
- db2 sequence 查询
1. 查询名字 select * from sysibm.sysequences where seqname='wx_Id' 2.nextVal select wx_seq_id.currval fr ...
- [原创]HBase学习笔记(3)- Java程序访问HBase
这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...
- java学习笔记 --- 面向对象2
一.匿名对象 (1)没有名字的对象 (2)应用场景 A:调用方法,仅仅只调用一次的时候. class Car { //描述属性.颜色,轮胎数. String color; int number; ...
- iOS 如何保持线程一直在运转(二)
一.接着上一篇通过NSThread可以方便的创建一个线程,并且启动线程的Runloop,在线程体中执行一个while循环 然后我们就可以方便得利用这个线程了 - (void)threadRun:(NS ...
- javascript . 02 break和continue、while、数组、冒泡排序
1.1 知识点 NaN是number类型 null是object类型 /** + 回车 多行注释 table 会为内部的tr td 自动补齐闭合标签 1.2 循环结构 1.2.1 Break和c ...
- Failed to connect to Xilinx hw_server. Check if the hw_server is running and correct TCP port is used.
Failed to connect to Xilinx hw_server. Check if the hw_server is running and correct TCP port is us ...
- Swift应用案例 2.闭包入门到精通
本文主要介绍Swift的闭包的使用并与OC的Block做比较.学习Swift是绕不过闭包的,因为无论是全局函数还是嵌套函数都是闭包的一种,本文主要介绍闭包表达式. 1.闭包表达式的使用 // 1. ...
- apache和nginx原理上的不同之处
今天群里提到面试时问到apache和nginx原理有什么不同,一时还真没想起,想到的只是他们的优缺点,便搜索了下.记录学习下.顺便记录下优缺点吧. 原理不同之处: 为什么Nginx的性能要比Apach ...