简介
在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。
大致分为两种,一种是footer为固定高度、一种为不固定的高度,当然不固定高度是包含了固定高度的,他们实现方式是不同的
。
固定footer高度
- 负margin-bottom实现
- calc()
- position: absolute
负margin-bottom实现
把wrapper部分最小高度设为100%,再利用内容部分的负底部外边距值来达到当高度不满时,页脚保持在窗口底部,当高度超出则随之推出的效果。
html代码如下:
1 | <div class="wrapper"> |
需要注意的是.wrapper
的 margin-bottom
值需要和.footer
的负的height
值保持一致,这一点不太友好。
calc()
使用CSS3新增的计算函数calc()
1 | <div class="wrapper"> |
如果不需考虑 calc() 以及 vh 单位的兼容情况,这是个很理想的实现方案。同样的问题是 footer 的高度值需要与 content 其中的计算值一致。
一般都是不建议使用css计算属性,会造成一定的性能损失。
position: absolute
通过绝对定位处理应该是常见的方案,只要使得页脚一直定位在主容器预留占位位置。
1 | <div class="wrapper"> |
wrapper 的 padding-bottom 需要与 footer 的 height 一致。
不固定footer高度
- 使用flexbox弹性盒布局
- grid布局
- table布局
不固定footer高度是包含固定高度的Sticky footer的。
flexbox
弹性布局,把主轴设置为column,再通过吧.content的felx设置为1(1, 1, auto).
1 | <div class="wrapper"> |
如果不知道flex布局的一些属性或者用法,可以看我另一篇博客。
grid布局
grid是比较新的css3的属性,没有看过可以看我另外一篇博客。
1 | <div class="wrapper"> |
网格布局(Grid layout)现在的支持还不太好,如果想查询浏览器或者在webview上的属性兼容性。可以去caniuse查询,但是以后肯定是grid的天下。
table布局
display: table的兼容性应该是最好的,直接上代码。
1 | <div class="wrapper"> |
需要注意的是,使用 table 方案存在一个比较常见的样式限制,通常 margin、padding、border 等属性会不符合预期。 笔者不建议使用这个方案。当然,问题也是可以解决的:别把其他样式写在 table 上。
总结
每个方案都有自己的优势和劣势,根据页面具体需求,选择最适合的方案。