需为中间内容区域设置上下外边距（如 margin-top: 60px、margin-bottom: 40px）以避开固定头部和底部占用的空间，确保其完整可见。
用 position: fixed 固定头部和底部时，中间内容被遮挡怎么办
直接加 position: fixed 到 header 和 footer 后，中间的 main 会“看不见”——因为 fixed 元素脱离文档流，main 默认从页面顶部开始渲染，正好被盖住。
解决核心就一条：给 main 设上下边距（或内边距），留出被 fixed 占用的空间。
-
header高 60px →main加margin-top: 60px -
footer高 40px →main加margin-bottom: 40px - 如果用
padding代替margin，确保main的box-sizing是border-box，避免高度叠加
为什么不用 position: sticky 替代 fixed
position: sticky 看起来更“智能”，但它依赖父容器滚动，且只在指定阈值内生效。当需要真正“始终贴边不随滚动位移”的头部/底部（比如全屏管理后台、带操作栏的移动端页），sticky 会在滚动到边界时消失或错位。
-
sticky要求父元素有明确高度和overflow: visible（默认值），否则可能完全不触发 - iOS Safari 对
sticky支持不稳定，尤其嵌套 flex 或 transform 容器时容易失效 - fixed 的行为确定、兼容性好（IE9+），更适合强控制场景
中间区域如何实现独立滚动而不影响整体布局
固定头尾后，中间区域滚动必须限制在自身范围内，不能让整个页面滚——否则头尾会跟着动或消失。
- 给
main设置height: calc(100vh - 60px - 40px)（减去头尾高度） - 再加
overflow-y: auto和overscroll-behavior: contain（防止滚动到底部时触发页面回弹） - 如果
main内部用的是flex布局，注意设flex-shrink: 0防止被压缩 - 移动端需额外加
-webkit-overflow-scrolling: touch保证滚动顺滑（iOS 15.4 前仍有必要）
fixed 头尾在不同设备上错位或缩放异常
常见于 viewport 设置不当或使用 rem/em 导致尺寸计算偏差，尤其在 iOS 横屏切换、安卓 Chrome 地址栏收起时。
- 务必在
中声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 头尾高度避免纯用
rem，建议用px或vh+clamp()（如height: clamp(48px, 6vh, 64px)） - 不要对
body设height: 100%，它会干扰100vh计算；改用min-height: 100vh - 测试时手动触发 iOS 地址栏收起（滚动页面），观察
100vh是否突然变小——此时应改用100dvh（Chrome 105+/Safari 16.4+ 支持）
真正麻烦的不是写几行 CSS，而是不同系统对视口单位的解释差异、fixed 元素在 zoom 或字体放大时的重绘表现，以及滚动事件与 overscroll 的耦合逻辑——这些细节不验证到真机，上线就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
