我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 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 噢～我有空了会分享做游戏的相干技术。