根本原因是body未撑满视口高度，需设min-height: 100vh并用flex-column或grid布局让main占满剩余空间，footer自然沉底；避免fixed导致可访问性问题。
中间内容少时 footer 上浮，根本原因是 body 没撑满视口高度
这不是 footer 写错了，而是 body 默认高度由内容决定——内容短，body 就矮，footer 自然跟着“悬空”。浏览器不会主动把页面拉到 100vh，除非你明确告诉它“至少这么高”。
常见错误是只给 html 或只给 body 设 height: 100vh，但这样在嵌套容器或某些 Safari 版本里会失效；更稳妥的是用 min-height: 100vh，并配合弹性布局分配空间。
用 flex-column + flex: 1 让 main 吃掉剩余空间
关键不是把 footer “拽下去”，而是让中间区域（main）主动占满所有可用高度，把 footer “顶”到底部。这比用 margin-top: auto 更可靠，尤其在 IE11 和现代 Safari 中兼容性更好。
-
body必须设display: flex和flex-direction: column -
main元素必须存在，且设flex: 1（等价于flex-grow: 1） -
header和footer不要加height或position，保持流内自然尺寸 - 如果用了
flex-shrink: 0，记得也加在header和footer上，防被压缩
别用 position: fixed 伪装沉底
加 position: fixed; bottom: 0 看似简单，但实际会让 footer 脱离文档流：内容滚动时它盖住文字、打印时消失、屏幕阅读器跳过它、iOS 键盘弹出后位置错乱——这些都不是“小问题”，而是可访问性和体验硬伤。
真正需要固定悬浮栏（比如底部导航）时，才考虑 fixed，且必须同步给 main 加 padding-bottom 预留空间；而版权类页脚，99% 场景下就该走 flex 沉底路径。
Grid 方案更简洁，但要注意 justify-self
如果项目支持现代浏览器，display: grid 是更语义化的替代方案：grid-template-rows: auto 1fr auto 直接定义三行，1fr 表示中间区域填满剩余空间。但注意：footer 默认不会铺满整行宽度，得显式加 justify-self: stretch。
同样，body 必须设 min-height: 100vh，否则 grid 不会按视口计算高度；grid 在 iOS Safari 14.5+ 无 vh 跳变问题，比 fixed 更稳。
最容易忽略的点是：所有方案都依赖 body 作为 flex 或 grid 容器——如果你的 footer 套在某个 div 里，或者被 inline-flex 父容器包裹，那它就彻底脱离了布局上下文，再怎么调样式也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
