why

在网页设计中, Sticky footers 设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。


opooooos~~~ 上面的内容来自w3cplus主要就是介绍了一种古老(反正我之前是没有太听说过)的CSS效果,他的使用范围非常广,像是在有些注册页面内容非常短但是非要在页面底部加一个用户协议之类的。

??

栗子 或者想一个全屏弹出框组件一样,内容是不固定的,有可能多有可能少,内容少时就在页面底部,页面多的时候就会顺着页面往下走。

或者适配设备的时候,iPhone4这样的设备非常短页面可以刚好在屏幕的底端,但是iPhone6plus 我也需要他在屏幕的下方这样处理起开就很麻烦 打死你 有的盆友就说了,我可以使用position: fixed;bottom:0;啊, 打死你 当然有些情况下是可以适用的,但是有些情况下并不适用,使用fixed不就反而更糟,再说了,像我们这样的喜欢新技(zhuang)术(B)的人,有使用新技(zhuang)术(B)的机会怎么能放过。

当然市面上的一些解决方案多少都有些兼容性问题存在,这当然不是我们追求的,老司机带路绝对稳。。 打死你

上车

我先就会通过一个实际的例子带大家了解一下,实现Sticky Footer的最佳套路 。。 不着急先整个栗子瞅瞅

  • 情况1 栗子

  • 情况2 栗子

话不多说先看一段代码 栗子 再看一段代码 栗子

套路

先就开始介绍这里面所有的套路

1、 .box 里面分为两部分 .box-main.box-close

2、 .box-wrapper 高度要是屏幕的高度; 要清除浮动 这里加了一个class .clearfix

3、 .box-main 一定要预留出 .box-close 元素的部分,这里使用的是padding-bottom;

4、 .box-close负margin-top,抵消 .box-mainpadding-bottom;

5、 上面四点很重要

栗子

只要准守上面的四点就能很轻易地实现一个Sticky Footer。 此方案可以解决大部分设备的兼容性问题,可以说是目前兼容性最好的方案(之一吧)