在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
一种兼容性比较好的解决方案:
外部有两层:内容包装器wrapper(里面有一层是真正用来扩展内容)+容器底部close
对照css样式,说明如下:
detail-wrapper//让它最小高度撑满屏幕 不然底部定位不到
detail-main//内容层需要有一个向下的padding 给底部层留位置 不会覆盖到底部层
detail-close//设置负margin 使内容往上提 提到想要的位置
就这样,不需要更多的代码!就能实现如下图所示的Sticky footers效果,而且兼容性是比较好的,亲测有效