我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转发本文需作者HullQin授权.我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景大多数网站都需要页脚，比如我的网站：game.hullqin.cn。将页脚放在底部是一种常见的产品吸引力。理想的页脚放在底部。如果要追求极致的用户体验，我觉得footer的行为是这样的：如果网页上的内容多了，超出了一屏可以显示的范围（即有垂直滚动条）bar),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为准。如果不冲突，则以宽度为准。高度也是如此。第2步：将元素放在底部现在，高度问题已经解决，我们只需要将footer元素放在body容器的底部即可。具体方法：给容器设置一个flex布局，并且是列方向；为要放置在底部的元素设置margin-top:auto。代码片段的核心代码假设容器的类是“root”，底部元素的类是“footer”：.root{min-height:100vh;显示：弹性；flex-direction:column;}.footer{margin-top:auto;}Extension如果还需要最小间距，怎么实现？只需为.footer设置padding-top！最后，我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
