利用 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 就把元素给拿回来了