顶部固定推荐用 position: sticky，因其保留文档流占位、不遮挡滚动且滚动到阈值才吸附；需配合 top: 0 及父容器具备滚动上下文（如 overflow-y: auto 或 height: 100vh）。
顶部固定用 position: sticky 还是 position: fixed？
直接说结论：顶部固定推荐用 position: sticky，但必须配合 top: 0 和父容器有滚动上下文（比如设置了 overflow-y: auto 或本身可滚动）。position: fixed 虽然也能固定，但会脱离文档流，导致中间内容“看不见顶部占位”，容易引发布局塌陷或点击穿透问题。
常见错误是只给 header 加 position: fixed 却忘了给 body 或 wrapper 加 padding-top 补齐高度，结果中间内容被遮住。更稳妥的做法是用 sticky，它天然保留占位，且支持滚动进入视口才吸附：
header {
position: sticky;
top: 0;
z-index: 100;
background: white;
}
底部固定为什么不能只靠 position: fixed; bottom: 0？
因为底部固定和顶部固定要共存，而两个 position: fixed 元素会互相不感知高度，中间区域无法自动计算可用高度——你得手动控制它的 height 或 max-height，否则滚动行为不可控。
真正可行的组合是：top: sticky + bottom: sticky（需浏览器支持），或者用 Flex 布局兜底。但注意：position: sticky 对 bottom 的支持较晚（Chrome 121+、Firefox 122+ 才稳定），旧版仍需 fallback。
所以生产环境更推荐用 Flex 布局统一约束：
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
header { flex-shrink: 0; }
main { flex: 1; overflow-y: auto; }
footer { flex-shrink: 0; }
main 区域滚动失效的几个典型原因
即使结构写对了，main 也可能不滚动。核心原因是：它没有明确的高度边界，或父元素没设 overflow，导致子元素溢出但不触发滚动条。
- 父容器（如
.wrapper）没设height: 100vh或min-height: 100vh，flex 布局无法分配剩余空间 -
main自身没设overflow-y: auto，或设了但内容高度容器高度 - 存在 margin/padding/border 导致盒模型超出，可用
box-sizing: border-box统一处理 - 某些 CSS 重置库（如 normalize.css）清除了
body的margin，但没补height: 100%，造成继承链断裂
移动端 Safari 滚动卡顿或 touch 不灵敏怎么办？
iOS Safari 对 overflow: auto 的滚动优化较差，尤其嵌套在 flex 容器里时。必须加这两行才能启用原生滚动惯性：
main {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
-webkit-overflow-scrolling: touch 是关键，不加的话滚动会“粘滞”，松手即停；overscroll-behavior: contain 防止滚到底还触发页面回弹（bounce），影响体验。
另外注意：如果 main 内部用了 position: absolute 子元素，它们可能脱离滚动上下文，需确认其父容器是否是 main 本身，而不是某个未设 position: relative 的中间层。
这种布局看着简单，但跨浏览器兼容性和滚动链路的每一环都容易漏掉一个属性，尤其是 height 继承、box-sizing、scrolling 行为三者要同时对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
