真正稳妥的做法是用Flexbox或Grid布局实现header/main/footer三段式结构，让main占据剩余空间，而非依赖position: fixed；前者兼容性好、行为可预测，后者更语义化且无需手动计算高度。
固定头部和页脚不是靠 position: fixed 硬顶就完事的——它大概率会导致内容被遮挡、滚动错位、移动端软键盘弹出后定位失效，甚至在 Safari 里直接“消失”。真正稳妥的做法是用布局级方案，把 header、main、footer 当作整体容器里的三块区域来分配空间。
用 Flexbox 实现 header/main/footer 自然撑满视口
这是目前兼容性好、行为可预测、维护成本低的首选。核心是让 body 成为 flex 容器，main 吃掉所有剩余高度，header 和 footer 保持流内尺寸，不脱离文档流。
-
html和body必须设min-height: 100vh（不是height: 100vh），否则短页面会被拉伸溢出 -
main必须写flex: 1（等价于flex-grow: 1），否则 footer 不会“沉底” -
header和footer加flex-shrink: 0，防止内容多时被压缩变形 - 如果需要中间区域可滚动，只给
main设overflow-y: auto，别动 body
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
flex-shrink: 0;
}
main {
flex: 1;
overflow-y: auto;
}
用 CSS Grid 替代 Flexbox，结构更语义化
如果你的项目已支持现代浏览器（iOS Safari ≥14.5），Grid 是更干净的选择：一行定义三行轨道，auto 行高自适应内容，1fr 让中间占满剩余空间。
-
grid-template-rows: auto 1fr auto中的1fr是关键，它代表“剩余全部可用空间” -
footer默认不铺满整行，需加justify-self: stretch - 不需要手动计算 header/footer 高度，也不用担心
flex-shrink干扰 - 避免了 Flexbox 在 IE11 下
flex: 1行为不一致的问题（但 IE11 已基本淘汰）
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
footer {
justify-self: stretch;
}
为什么 position: fixed 容易出问题
它看似简单，实则埋着多个运行时隐患，尤其在真实业务场景中：
- 忘记设
top: 0或bottom: 0，元素会卡在文档流原始位置，滚动后“失踪” - fixed 元素脱离文档流，后续内容会上移——必须手动给
main加margin-top和margin-bottom预留空间，且数值要和 header/footer 高度严格匹配 - 移动端 Safari 在软键盘弹出时重排视口，
fixed元素可能错位或卡住不动 - 父容器若含
transform、filter或overflow: hidden，会创建新的 containing block，导致 fixed 失效
什么时候才该用 position: sticky
它不是用来“固定页脚到底部”的，而是实现“滚动到临界点后吸顶/吸底”的交互效果。比如导航栏滚动到顶部后粘住，或表格最后一行滚动到底部时停住。
- 必须配合
top或bottom使用，例如position: sticky; top: 0; - 父容器不能有
overflow: hidden|auto|scroll，否则 sticky 失效 - 不能用于
body直接子元素（部分旧版 Chrome 不支持），建议包一层<header></header> - 移动端比
fixed更稳定，但无法替代 Flex/Grid 实现“内容不足时页脚沉底”
真正难的不是写出能“看起来固定”的代码，而是让 header 和 footer 在各种内容长度、不同设备、软键盘弹出、缩放操作下都保持行为一致——这恰恰是布局方案（Flex/Grid）胜过定位方案（fixed/sticky）的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
