这是我的专栏《前端入门到进阶》，跟HullQin学前端，入门到进阶！带你进大厂！
背景
大部分网站都需要footer，例如我的网站：game.hullqin.cn。
footer置底，是一个常见的产品诉求。
理想的footer置底
如果要追求极致用户体验，我认为footer行为是这样的：
- 如果网页内容比较多，超过一个屏幕能展示的范围（即有竖向滚动条），footer应该放到最下面，并且跟主体内容有一个小小的固定的距离。
- 如果网页内容比较少，不够一个屏幕，footer应该放在屏幕最下面，保证不出现滚动条即可。此时footer跟主体内容会有更大的距离。
举个例子
![[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏_网页内容](https://file.cfanz.cn/uploads/jpeg/2022/08/10/10/76014B501c.jpeg "image.png")
![[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏_前端_02](https://file.cfanz.cn/uploads/jpeg/2022/08/10/10/f8Vd4R3K74.jpeg "image.png")
具体实现
你可以检查一下我的html结构，就能明白了：
![[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏_优先级_03](https://file.cfanz.cn/uploads/jpeg/2022/08/10/10/8VcZ1C8807.jpeg "image.png")
第一步，容器设置min-height
我们给容器（body，在你项目中，容器也可能是id="root"的div）设置min-height = '100vh'，就能保证：内容不够一个屏幕时，高度也要撑开到一个屏幕。如果内容超过一个屏幕时，min-height就失效了。
如果你不太了解，一定要看这篇文章：《[CSS入门到进阶] 你真的了解 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。
![[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏_网页内容_04](https://file.cfanz.cn/uploads/png/2022/08/10/10/Q0P43127A1.png)
核心代码
假设容器的class是"root"，置底的元素的class是"footer"：
.root {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
延伸
如果你还需要最小的间距，该怎么实现呢？
只需要给.footer设置padding-top即可！
写在最后
我是HullQin，独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏，绝不收费，绝无广告，点这就能开始玩。还独立开发了《合成大西瓜重制版》。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。
再给专栏《前端入门到进阶》打个广告：跟HullQin学前端，入门到进阶！带你进大厂！欢迎关注～
