likes
comments
collection
share

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

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

背景

大部分网站都需要footer,例如我的网站:game.hullqin.cn

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

理想的footer置底

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

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

举个例子

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

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

具体实现

你可以检查一下我的html结构,就能明白了:

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

第一步,容器设置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 噢~我有空了会分享做游戏的相关技术。

转载自:https://segmentfault.com/a/1190000042453093
评论
请登录