flex布局最可靠，通过根容器设flex-column、主内容区flex:1撑开空间，使footer自然贴底；grid更简洁但不兼容IE；fixed易遮挡内容且难适配高度变化。
footer 高度不确定时，flex 布局最可靠
当页面内容少、视口高，而 footer 又不能撑满剩余空间时，flex 是目前兼容性好、逻辑清晰的首选方案。关键不是“固定定位”，而是让主体区域自动撑开，把 footer “推”到底部。
常见错误是只给 body 或 html 设 min-height: 100vh，但没约束子容器行为，导致 footer 脱离文档流或重叠。
- 根容器（如
body）设display: flex和flex-direction: column - 主内容区（如
main）加flex: 1，它会吸收所有剩余空间 -
footer保持默认流内行为，自然落在底部
html, body {
height: 100%;
margin: 0;
}
<p>body {
display: flex;
flex-direction: column;
}</p><p>main {
flex: 1;
}</p><p>footer {
/<em> 不需要 position: fixed </em>/
}用 grid 实现贴底更简洁，但注意 IE 不支持
grid 的 minmax() + auto 行轨道能直接表达“内容占满，footer 固定高度”的意图，代码更少，语义更强。但它在 IE 中完全不可用，若需兼容 IE11，必须降级到 flex 方案。
-
grid-template-rows: 1fr auto是核心：第一行占剩余空间，第二行由内容决定高度 - 必须确保父容器有明确高度（如
min-height: 100vh） - 避免对
footer使用margin-top: auto等 hack，那属于旧式浮动思路
body {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
margin: 0;
}position: fixed 会让 footer 覆盖内容，慎用
用 position: fixed + bottom: 0 确实能让 footer 始终显示在视口底部，但它脱离文档流，不会为自身预留空间——滚动时内容会上滑到 footer 下方，造成遮挡。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用
fixed，必须给body或最后一个内容块加padding-bottom，值 ≥footer高度 -
footer高度变化时（比如响应式折叠），padding-bottom得同步更新，纯 CSS 难以自动适配 - 无障碍和打印样式中，
fixed元素可能重复出现或错位
content 少时 footer 上浮，检查是否漏了 height: 100%
即使用了 flex 或 grid，如果 html 和 body 没设 height: 100%，根容器高度仍按内容计算，导致子级的 100vh 或 1fr 失效。
- 必须同时设置
html { height: 100% }和body { height: 100% } - 部分重置样式（如
normalize.css）会影响body默认表现，建议显式覆盖 - 使用
min-height: 100vh比height: 100vh更安全，防止内容超长时被截断
实际项目里，flex 方案出问题，八成是因为忘了给 html 和 body 设高度；grid 方案出问题，往往卡在 IE 兼容或行轨道定义不准确。别迷信“一行代码解决”，先确认容器链的高度传递是否完整。
