背景
最近要给豆瓣直租加上版权、备案信息，这些信息通常放在页脚。而页脚的具体放置也有些讲究，具体希望达到的效果是这样的：
- 对于长页面（视口无法放下全部内容，需要向下滚动），希望页脚放在正文结尾的下方，即
position: static;效果。
- 对于短页面（视口可以放下全部内容，且页面底部还留有许多空白），希望页脚放在视口底部，即
position: fixed; bottom: 0; right: 0;效果。
实现方法
为了方便下文表述，我们定义 HTML 结构如下（header、main、footer 分别代表网页的顶部标题栏、主体/正文、底部页脚）：
header main
原以为需要用 JavaScript 获取 main 的位置和视口大小，根据它们的相对关系，设置 position 实现。但跟朋友讨论了下，用 CSS 的 min-height 应该可以实现类似的效果。自己也由此想到了一些衍生方法。
设置 main 属性 min-height: 100vh;
vh 是 viewport height 的缩写，表示视口高度。也不必须是 100vh，也可能是 98vh/99vh 等。
这个方法的思路是，将 main 的 height 置成足够大的值，这样即使是短页面，也能保证页脚出现在页面底部。
这个方法对于短页面，也有缺点：
- 如果
min-height值偏小，则页脚位置距页面底部可能会比较高； - 如果
min-height值偏大，则当前视口无法完整显示页脚内容，需要向下滚动屏幕。比如说min-height: 100vh;一定会导致需要滚动页面才能看到页脚；而对于一个短页面来说，页面本身是有大量空白的，却需要滚动页面才能完整地看到页脚，这显然是不合理的。
对页面美观程度要求不高的话，可以用这个方法。
参考：
下面介绍另一个目前看起来效果完美的方法，当然实现上会更复杂些。
利用 flex 布局的 flex-grow 属性，自动调整 main 的 height
该方法思路与上面方法类似，优化点在于：不去手动指定 main 的 height，而是将整个 div 设定为 display: flex;，而 header、footer 的高度是确定的，利用 flex-grow 属性，自动调整 main 的 height。
相关 CSS 代码：
div {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header {
flex: none; // 等价于 flex: 0 0 auto;
}
main {
flex: auto; // 等价于 flex: 1 1 auto;
}
footer {
flex: none; // 等价于 flex: 0 0 auto;
}
CodePen 链接：CSS flex-grow to fit screen (codepen.io)
参考：
- html – Make a div fill the height of the remaining screen space – Stack Overflow
- css – How to create div to fill all space between header and footer div – Stack Overflow
- html – how to fit screen full height (using CSS)? – Stack Overflow
利用 grid 布局的 grid-template-rows 属性 auto 值，自动调整 main 的 height
思路与上述用 flexbox 一样，只是改用 grid 布局实现。
相关 CSS 代码：
div {
div {
height: 100vh;
display: grid;
display: -webkit-grid;
grid-template-rows: 50px auto 50px;
}
header {
height: 50px;
}
main {
}
footer {
height: 50px;
}
CodePen 链接：CSS grid-template-rows auto to fit screen (codepen.io)
参考：