我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

大部分网站都需要 footer，例如我的网站：game.hullqin.cn。

footer 置底，是一个常见的产品诉求。

理想的 footer 置底

如果要追求极致用户体验，我认为 footer 行为是这样的：

1. 如果网页内容比较多，超过一个屏幕能展示的范围（即有竖向滚动条），footer 应该放到最下面，并且跟主体内容有一个小小的固定的距离。

2. 如果网页内容比较少，不够一个屏幕，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 噢～我有空了会分享做游戏的相关技术。