关于Sticky footers的设计

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。

一种兼容性比较好的解决方案:

外部有两层:内容包装器wrapper(里面有一层是真正用来扩展内容)+容器底部close

关于Sticky footers的设计_第1张图片
html
关于Sticky footers的设计_第2张图片
css

对照css样式,说明如下:

detail-wrapper//让它最小高度撑满屏幕 不然底部定位不到

detail-main//内容层需要有一个向下的padding 给底部层留位置 不会覆盖到底部层

detail-close//设置负margin 使内容往上提 提到想要的位置

就这样,不需要更多的代码!就能实现如下图所示的Sticky footers效果,而且兼容性是比较好的,亲测有效

你可能感兴趣的:(关于Sticky footers的设计)