[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏

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

背景

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

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

理想的footer置底

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

1. 如果网页内容比较多，超过一个屏幕能展示的范围（即有竖向滚动条），footer应该放到最下面，并且跟主体内容有一个小小的固定的距离。
2. 如果网页内容比较少，不够一个屏幕，footer应该放在屏幕最下面，保证不出现滚动条即可。此时footer跟主体内容会有更大的距离。