利用 position: sticky 实现 footer 浮动在底部的效果
在开发中,我们写过很多种方法实现 footer 浮在底部的效果,最常用的应该就是 position: fixed
这个样式了。但这个写法有个不算弊端的弊端,就是需要在容器层空出一段 padding-bottom
来容纳滚到底部的时候“取消”浮层的效果。
这次我们来使用 fixed
的兄弟属性 sticky
来实现该效果,下面是 CSS 样式代码:
html, body {
height: 100%;
}
body > footer {
position: sticky;
top: 100vh
}
以上样式能实现 footer 浮底的效果,有两点是关键:
- 设置
position: sticky
的元素,在元素没在页面外的情况下,就是一个普通的块级元素(既没有父相子绝的效果,也不能像relative
那依靠上下左右来偏移),这就解决了上面要留出padding-bottom
的问题 - 然后是
top: 100vh
并不会将元素挤到屏幕外面,因为到了屏幕外面,sticky
就把元素给拿回来了