大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。
背景
大部分网站都需要footer，例如我的网站：game.hullqin.cn。
footer置底，是一个常见的产品诉求。
理想的footer置底
如果要追求极致用户体验，我认为footer行为是这样的：
- 如果网页内容比较多，超过一个屏幕能展示的范围（即有竖向滚动条），footer应该放到最下面，并且跟主体内容有一个小小的固定的距离。
- 如果网页内容比较少，不够一个屏幕，footer应该放在屏幕最下面，保证不出现滚动条即可。此时footer跟主体内容会有更大的距离。
举个例子
具体实现
你可以检查一下我的html结构，就能明白了：
第一步，容器设置min-height
我们给容器（body，在你项目中，容器也可能是id="root"的div）设置min-height = '100vh'，就能保证：内容不够一个屏幕时，高度也要撑开到一个屏幕。如果内容超过一个屏幕时，min-height就失效了。
如果你不太了解，一定要看这篇文章：《你真的了解 width height 吗？》。文中提到：
max-width和min-width优先级比width高！而min-width比max-width优先级更高！
指的是，当max-width和width发生矛盾时，即width>max-width了，那么会以max-width为准。如果没有发生矛盾，那么就以width为准。height也是同理。
第二步：元素置底
现在，高度问题解决了，我们只要把footer元素放在body容器底部即可。
具体方法：
- 给容器设置flex布局，并且是column方向的；
- 给要置底的元素设置margin-top: auto。
核心代码
假设容器的class是"root"，置底的元素的class是"footer"：
.root {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
延伸
如果你还需要最小的间距，该怎么实现呢？
只需要给.footer设置padding-top即可！
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
