应优先使用 display: flex 或 display: grid 实现 header/main/footer 垂直自适应布局，避免 position: fixed/absolute；flex 方案需父容器设 min-height: 100vh 和 flex-direction: column，main 设 flex: 1，header/footer 设 flex-shrink: 0；grid 方案更语义化，推荐 grid-template-rows: auto 1fr auto。
直接用 display: flex 或 display: grid，别碰 position: fixed 或 position: absolute —— 后者在现代项目里是“表面简单、实际埋雷”的典型。
用 flex 实现 header/main/footer 垂直自适应
核心不是“固定”，而是让 main 主动占满剩余空间。前提是父容器（通常是 body）有明确高度参照。
-
body必须设min-height: 100vh（不是height: 100vh），否则短内容页会被拉伸，长内容页又可能溢出 -
body设display: flex; flex-direction: column，header 和 footer 不加任何定位，保持流内自然高度 -
main必须写flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），否则它不会撑开 -
header和footer加flex-shrink: 0，防止内容多时被压缩变形 - 如果要支持 IE11，
flex: 1可能不稳，可改用margin-top: auto加在footer上
用 grid 定义三行轨道更语义化
grid-template-rows: auto 1fr auto 是最直观的表达：头尾随内容，中间吃掉所有剩余空间。比 flex 更少隐式依赖。
-
body同样要设min-height: 100vh和display: grid -
grid-template-rows: auto 1fr auto中的1fr不受内容高度影响，始终填满空隙 -
footer默认不铺满整行宽度，需加justify-self: stretch - iOS Safari 14.5+ 对该写法支持良好，没有
100vh在地址栏收起时跳变的问题 - 不用预先知道 header/footer 的像素高度，适合内容动态、字体缩放或响应式字号场景
为什么 position: fixed 头尾容易出问题
它看似“固定”了位置，但会脱离文档流，导致中间区域默认从视口顶部开始渲染，直接被盖住——这不是 bug，是 spec 规定的行为。
- 必须手动给
main加margin-top和margin-bottom补偿头尾高度，一旦 header 高度由内容撑开（比如换行、字号变大），就立刻错位 -
100vh在 iOS 横屏切换或 Chrome 地址栏收起时会突变，此时calc(100vh - 60px - 40px)算出来的是错的；虽可用100dvh（Chrome 105+/Safari 16.4+），但兼容性仍受限 - 移动端
-webkit-overflow-scrolling: touch已被废弃，iOS 15.4 后滚动顺滑性反而下降，而 flex/grid 方案天然不依赖该属性 - 嵌套
transform或flex容器时，position: sticky（常被误当 fixed 替代）大概率失效，fixed 又无法响应父容器滚动边界
中间区域需要独立滚动时怎么设
目标是：头尾不动，只有中间区域能滚，且滚动到底部时不触发页面级回弹（尤其 iOS）。
-
main设overflow-y: auto，而不是scroll，避免永远显示滚动条 - 加
overscroll-behavior: contain，禁用滚动到顶/底时的弹性回弹（iOS Safari 16.4+、Chrome 63+ 支持） - 若
main内部用 flex 布局，记得设flex-shrink: 0，否则在窄屏下可能被压缩到看不见 - 不要对
body设height: 100%，它会干扰100vh计算，造成高度塌陷或双滚动条 - viewport 必须声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则 iPhone X+ 等刘海屏底部安全区可能遮挡 footer
真正麻烦的从来不是“怎么写出来”，而是“改一行字号、换一种设备、切一次横屏后还对不对”。flex 和 grid 的确定性，远胜于靠 top/bottom/height 手动计算的布局方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
