关于前端:CSS入门到进阶-4行CSS实现footer置底超常见的需求快来收藏

我是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 噢～我有空了会分享做游戏的相干技术。