利用 position: sticky 实现 footer 浮动在底部的效果


在开发中,我们写过很多种方法实现 footer 浮在底部的效果,最常用的应该就是 position: fixed 这个样式了。但这个写法有个不算弊端的弊端,就是需要在容器层空出一段 padding-bottom 来容纳滚到底部的时候“取消”浮层的效果。

这次我们来使用 fixed 的兄弟属性 sticky 来实现该效果,下面是 CSS 样式代码:

html, body {
  height: 100%;
}

body > footer {
  position: sticky;
  top: 100vh
}

以上样式能实现 footer 浮底的效果,有两点是关键:

  1. 设置 position: sticky 的元素,在元素没在页面外的情况下,就是一个普通的块级元素(既没有父相子绝的效果,也不能像 relative 那依靠上下左右来偏移),这就解决了上面要留出 padding-bottom 的问题
  2. 然后是 top: 100vh 并不会将元素挤到屏幕外面,因为到了屏幕外面,sticky 就把元素给拿回来了