推荐用 flex 布局实现页脚贴底：父容器设 display: flex、flex-direction: column 和 min-height: 100vh，main 设 flex: 1，footer 自然沉底；grid 方案用 grid-template-rows: auto 1fr auto；禁用 position: fixed 因其破坏语义与可访问性。
页面内容少时，footer 会悬在半空，不是贴底——这不是 CSS 写错了，而是默认文档流行为。解决它不靠 position: fixed（会遮挡内容、影响打印、破坏语义），而是用现代布局逻辑让 footer “被撑到底部”。
用 flex 布局让 footer 自动沉底（推荐）
这是目前最可靠、语义清晰、响应式友好的方式。关键不是“固定”，而是让主体区域占满剩余高度，把 footer 挤到可视区底部。
- 父容器（如
body或一个包裹header/main/footer的div）设为display: flex+flex-direction: column -
main（或主体内容容器）加flex: 1，它会自动拉伸填满剩余空间 -
footer无需额外定位，自然位于 flex 容器末尾
示例结构：
<body style="display: flex; flex-direction: column; min-height: 100vh;"> <header>...</header> <main style="flex: 1;">内容</main> <footer>版权信息</footer> </body>
注意：min-height: 100vh 是必须的，否则 flex 容器高度可能不足，flex: 1 就没空间可分。
立即学习“前端免费学习笔记（深入）”；
用 grid 实现等效效果（适合已有 grid 布局的项目）
如果你的页面主结构已基于 CSS Grid，直接复用网格线更干净，避免嵌套 flex。
- 父容器设
display: grid和grid-template-rows: auto 1fr auto -
auto行用于header和footer，1fr行撑满中间内容区 - 不需要给
main单独设属性，行高分配已决定位置
兼容性：Chrome 66+、Firefox 63+、Safari 16.4+ 支持良好；IE 完全不支持，需降级方案。
为什么不用 position: fixed？
表面看它“总在底部”，但实际问题很多：
-
footer脱离文档流，长页面滚动时它会盖住正文底部内容 - 打印时通常不显示，或错位（浏览器默认忽略
fixed元素） - 屏幕阅读器可能跳过它，影响无障碍访问
- 移动端键盘弹出时，
fixed元素常被顶出视口，且无法跟随滚动
除非你明确需要“悬浮式工具栏”（比如聊天窗口），否则不要用 position: fixed 处理页脚。
旧项目兼容 IE8–10 怎么办？
Flex/Grid 都不支持，只能退回到“圣杯布局”变体：用 absolute + padding-bottom 模拟。
- 给 body 设
position: relative - 给
footer设position: absolute; bottom: 0; width: 100% - 给主体内容容器（如
main）设padding-bottom，值 ≥footer高度，防止内容被遮挡
这个方案脆弱：footer 高度必须固定，且所有内容必须严格在 main 内；一旦 footer 文字换行或字体缩放，padding-bottom 就失效。仅作兜底，不建议新项目采用。
真正难的不是写哪一行 CSS，而是判断页面是否真的“内容少”——比如某些 CMS 生成页，看似空，实则 JS 动态加载内容。此时用 flex: 1 仍有效，但若 JS 加载失败，页脚又会飘起来。这类场景得配合 JS 监听内容变化，或服务端预判高度。
