最稳妥方式是用 display: flex 或 grid 实现固定头部页脚，避免 position: fixed 导致的遮挡、滚动错位、vh 跳变及响应式难题；flex 需 body min-height: 100vh + main flex: 1，grid 推荐 grid-template-rows: auto 1fr auto。
固定头部和页脚最稳妥的方式是用 display: flex 或 display: grid，而不是靠 position: fixed 硬顶——后者容易遮挡内容、滚动错位、移动端视口高度跳变，且响应式适配成本高。
为什么不能直接用 position: fixed
看似简单，但实际埋了多个运行时隐患：
-
position: fixed会让 header/footer 脱离文档流，导致 main 内容被遮盖，必须手动给padding-top和padding-bottom补偿，且数值难精确匹配动态高度 - 在 iOS Safari 中，软键盘弹出或地址栏收起时，
vh会跳变，fixed元素位置错乱，footer 可能悬空或压住内容 - 无法自然实现“内容不足时 footer 沉底、内容溢出时 footer 随内容滚动到底”的语义行为
- 需要额外维护
z-index层级，一旦页面有 modal、toast 等浮层，极易出现遮挡顺序错误
flex-direction: column 布局的关键参数
把 body 设为 flex 容器，让 main 吃掉剩余空间，header 和 footer 自然锚定两端：
-
body必须设min-height: 100vh（不是height: 100vh），否则短内容页会被拉伸溢出 -
main必须写flex: 1（等价于flex-grow: 1），否则 footer 会粘在 main 下方，不“沉底” -
header和footer不要设position，它们的高度会自动被 main 尊重；加flex-shrink: 0防止被压缩 - IE11 对
flex: 1支持不稳，如需兼容，可改用margin-top: auto加在footer上
grid-template-rows: auto 1fr auto 更干净的写法
Grid 方案代码更少、结构更干净，现代浏览器支持良好，iOS Safari 14.5+ 也无 vh 跳变问题：
-
grid-template-rows: auto 1fr auto中的1fr表示中间区域占满所有剩余空间 -
body必须显式设min-height: 100vh，否则 grid 不会按视口高度计算 -
footer默认不会拉伸宽度，加justify-self: stretch可确保它铺满整行 - 不用管
header/footer高度是否固定——auto行高会自适应内容，无需预设像素值
移动端滚动与内容截断的常见陷阱
即使用了 flex/grid，仍可能遇到中间区域不滚动、内容被裁切的问题：
-
main必须设overflow-y: auto（不是scroll），否则 iOS 上会出现“无法拖动但有滚动条”的假象 - 不要给
html或body设overflow: hidden，这会禁用整个页面滚动，导致main的滚动失效 - 如果
main里嵌套了position: absolute子元素，它们会相对于body定位，而非main，容易跑出可视区 - 在微信内嵌 WebView 中，某些版本对
100vh解析异常，可临时降级用100dvh（如支持）或 JS 动态设置高度
真正麻烦的从来不是怎么写那几行 CSS，而是 header 和 footer 的高度是否动态、是否含动画、是否在不同设备上保持一致——这些细节一旦没对齐，flex 或 grid 的“自动适应”就会变成不可控的弹性拉扯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
