“粘性底部”正确解法是父容器设 display: flex; flex-direction: column 和 min-height: 100vh，main 加 flex: 1，footer 保持 flex: none 并可选加 margin-top: auto；position: sticky 对 footer 无效因其无“进入视口”过程，且易降级失效。
直接给 footer 加 position: sticky 或 position: fixed 是错的——它要么不生效，要么遮内容，根本不是“粘性底部”的正确解法。
为什么 position: sticky 对 footer 无效
position: sticky 只在元素随滚动“进入/离开视口”时触发吸附，而 footer 天然在文档末尾，浏览器还没开始滚动它就已经在视口底部了，没有“进入”过程。多数情况下浏览器会悄悄降级为 static，你完全感知不到它起效。
- 即使父容器设了
overflow-y: scroll，footer也不在可滚动区域内，仍不满足 sticky 条件 - 某些旧版 Safari 会忽略
bottom: 0，导致行为不一致 - 它无法响应内容高度变化：内容变短时，
footer不会上移；内容变长时，可能被卡在中间
flex: 1 必须加在主内容区，不是 footer
很多人误以为给 footer 加 flex-grow: 1 就能把它“拉”到底部，实际效果相反：flex-grow 是让元素抢占剩余空间，footer 一旦拉伸，就会变高、盖内容、甚至溢出视口。
-
flex: 1应该加在main或.content这类主内容容器上，让它吃掉所有剩余空间，从而把footer“顶”到底部 -
footer应保持flex: none（即默认值），或显式写flex-shrink: 0防止被压缩 - 父容器必须是
display: flex; flex-direction: column，且有明确高度来源（如min-height: 100vh）
margin-top: auto 是更鲁棒的后备方案
当页面结构复杂（比如有多个动态高度区块），flex: 1 可能因高度计算冲突而失效；此时直接给 footer 加 margin-top: auto 更可靠——它不依赖“谁来占满”，只关心“最后一个想沉底的元素”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只需确保父容器是
display: flex; flex-direction: column，无需预设其他子项高度 - 兼容性更好，尤其对旧版 Safari（如 10.1）更稳定
- 和
flex: 1不冲突，可以同时写：main { flex: 1; }+footer { margin-top: auto; }，双保险
别漏掉 min-height: 100vh 和重置 body 边距
html, body { height: 100% } 看似合理，但一旦中间某个父级没设高，整个继承链就断了；min-height: 100vh 更直接、更容错。
-
body必须设min-height: 100vh（不是height: 100%），否则 flex 容器无高度基准，flex: 1就没“剩余空间”可占 -
body { margin: 0; }必须写，否则默认外边距会让布局错位，尤其在 Safari 中表现明显 - 不要给
footer设height后又忘记预留padding或line-height，文字容易贴边难读
真正麻烦的点不在代码行数，而在高度链是否完整、是否所有父级都放弃了默认 margin、以及 footer 是否还留在文档流里——这些细节一漏，flex 就会静默失效，你得花半天时间去查哪个祖先元素偷偷撑高了或者塌陷了。
