footer不会自动贴底，它只是语义容器；必须用flex或grid布局显式控制：body设min-height:100vh和display:flex/column或grid/rows:auto 1fr auto，main设flex:1，footer为body直接子元素。
footer 标签不会自动贴底，它只是语义容器；要让它“始终在页面底部”，必须用 CSS 布局显式控制其位置，而不是靠标签本身。
为什么写完 footer 还悬在半空？
浏览器把 footer 当作普通块级元素：内容少时，它停在正文末尾；内容多时才自然到底——这根本不是 bug，而是文档流默认行为。常见错误包括：
- 只写了
footer标签，没给父容器（如body）设高度约束 - 误加
position: fixed或absolute，导致遮挡内容、打印失效、屏幕阅读器跳过 - 把
footer套在额外div里，破坏了它作为body直接子元素的布局前提
用 display: flex 实现真·粘性底部（推荐）
这是目前最可靠、语义清晰、无障碍友好的方案。关键不是“固定”，而是让主内容区域撑满剩余空间，把 footer 挤到底部。
-
html和body都要设height: 100%（旧版 Safari 兼容必需） -
body设display: flex; flex-direction: column; min-height: 100vh - 主内容必须用
<main>（语义正确），并设flex: 1（等价于flex-grow: 1） -
footer必须是body的最后一个直接子元素，不能套 wrapper
示例结构：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<body style="display: flex; flex-direction: column; min-height: 100vh;"> <header></header> <main style="flex: 1;">内容</main> <footer>© 2026</footer> </body>
用 display: grid 更简洁（现代项目首选）
一行 grid-template-rows 就能划分三段：头部、自适应主体、页脚。无需调整子元素样式，结构更干净。
-
body必须设min-height: 100vh（height: 100vh不够，短页会溢出） -
grid-template-rows: auto 1fr auto—— 第一行占头部高度，第二行吃掉所有剩余空间，第三行按footer自然高度收缩 - 确保
header、main、footer是body的直系子元素
示例：
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
哪些情况真该用 position: fixed？
仅当设计明确要求 footer 始终悬浮在视口底部（比如全站操作栏），且你愿意承担以下代价：
- 必须为
main或body手动加padding-bottom（值 ≥footer高度），否则内容会被盖住 - 移动端键盘弹出时
vh失准，footer可能错位 - 打印时消失，屏幕阅读器无法按顺序读到它
- 如果
footer高度不固定（如响应式字号变化），得用calc()或 JS 动态计算
对版权信息这类纯展示内容，position: fixed 几乎总是错的。
最容易被忽略的点：所有方案都依赖 body 是 footer 的直接父容器，且 min-height: 100vh 是硬性前提——漏掉它，flex: 1 或 1fr 就没空间可分。
