用 flex-column 实现底部固定布局需设父容器 min-height: 100vh 且 flex-direction: column，main 设 flex: 1 占剩余空间，footer 不设 flex；Grid 方案用 grid-template-rows: auto 1fr auto 更语义化，1fr 表示剩余空间，二者均需处理移动端 vh 抖动问题。
用 flex-direction: column 实现底部固定布局
核心是让容器成为 flex 垂直主轴，内容区占满剩余空间，底部不参与高度争夺。常见错误是忘记给父容器设 height 或 min-height，导致 flex: 1 无参照可伸展。
- 父容器必须有明确高度约束，比如
min-height: 100vh（推荐）或height: 100%（需确保祖先也有高度） - 子容器按顺序排列：
header（可选）、main（设flex: 1）、footer（不设 flex，自然固定在底） - 避免给
main设height: 100%—— 它会和footer冲突，撑出滚动条
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
<p>.main {
flex: 1;
}</p><p>.footer {
/<em> 不设 flex，也不设 margin-top: auto，否则在 Safari 旧版可能错位 </em>/
}</p>
用 grid 实现底部固定布局
Grid 更语义清晰：用 grid-template-rows 明确划分头部、自适应主体、固定底部。比 Flex 更少依赖“撑高”逻辑，但兼容性略低（IE 不支持）。
-
1fr是关键：它代表“剩余可用空间”，不是“100% 高度”，所以无需担心内容溢出 - 若需页脚始终贴底（即使内容短），用
minmax(0, 1fr)替代1fr可防某些场景下main高度塌缩 - 避免混用
grid和flex在同一层级做高度控制，容易引发嵌套计算偏差
.layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
<p>.header { }
.main { }
.footer { }</p>
内容过长时滚动区域怎么定？
默认整个页面滚动，但通常只希望 main 区域滚动。这时不能靠 overflow-y: auto 简单加在 main 上——它需要明确高度才能生效。
- Flex 方案中，在
.main加overflow-y: auto，同时确保其父（flex 容器）高度已由min-height: 100vh锁定 - Grid 方案中同理，但更稳：只要
main行轨道是1fr，它就有确定高度，overflow-y: auto可直接生效 - 切忌给
body或html设overflow: hidden—— 这会截断 footer 的点击区域或焦点导航
.main {
overflow-y: auto;
/* 不需要 height，fr 已提供上下文 */
}
移动端适配与常见坑
iOS Safari 的 viewport 高度不稳定（地址栏收放影响 vh），直接用 100vh 可能导致 footer 悬空或遮挡。这不是布局逻辑问题，而是运行时高度抖动。
- 临时解法：用
min-height: 100dvh（dvh是动态视口单位，Safari 16.4+ 支持） - 兼容方案：用 JS 监听
resize，动态设置style.minHeight = window.innerHeight + 'px'，并节流 - Footer 高度写死（如
60px）时，别用margin-top: auto推到底部 —— 它在部分 Android WebView 中计算异常
真正麻烦的不是怎么写，而是怎么测：不同机型、不同系统版本、横竖屏切换、弹出软键盘……这些都会扰动视口高度。固定底部布局的鲁棒性，往往取决于对这些边界条件的容忍设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
