不能直接用 top: 0; bottom: 0;，因为中间区域会撑满 viewport 覆盖 header/footer；需设 top 为 header 高度、bottom 为 footer 高度，并确保三者同级且父容器 relative 定位，中间区加 overflow-y: auto 实现滚动。
绝对定位实现上下固定中间自适应，为什么不能直接用 top: 0; bottom: 0;？
因为中间区域设 position: absolute 后，若只写 top: 0; bottom: 0;，它会撑满整个 viewport，把 header 和 footer 完全盖住——它们没消失，只是被叠在下面了。真正要的是「中间区域避开 header 和 footer 的高度」。
常见错误现象：body 没设 margin 或 padding，header/footer 用了 position: fixed，但中间内容滚动时穿透顶部/底部、文字被遮挡、高度计算错乱。
- header 和 footer 必须明确高度（比如
height: 60px），不能依赖内容自适应后再算 - 中间区域的
top要等于 header 高度，bottom要等于 footer 高度 - 如果 header/footer 高度不固定（如响应式字号变化），绝对定位方案就不可靠，得换 flex 或 grid
HTML 结构怎么搭才不踩坑？
结构必须满足「header 和 footer 是兄弟级元素，中间区域是独立同级块」，且三者都挂载在同一个相对定位容器下。否则 top/bottom 会相对于 body 或最近有定位的祖先计算，结果偏移。
典型错误：把中间区域包在 <main></main> 里，而 <main></main> 没设 position: relative，导致绝对定位脱标到 body 上。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
或外层<div class="layout">）必须加 <code>position: relative - header/footer 用
position: fixed; left: 0; right: 0;，并设z-index确保层级正确 - 中间区域用
position: absolute; top: 60px; bottom: 40px; left: 0; right: 0;（数值按实际 header/footer 高度填） - 给中间区域加
overflow-y: auto（不是scroll，避免永远显示空滚动条） - 确保中间区域内第一层子元素（如
<div class="content">）没有 margin/padding 把高度顶破 <li>如果用了 <code>box-sizing: border-box，记得把 border/padding 算进 height，否则top/bottom拉开的空间可能不够 - 禁用
user-scalable=no，允许缩放可缓解部分错位 - 监听
resize和focusin事件，在输入框聚焦时临时改用 JS 动态更新中间区域的bottom值 - 更稳妥的做法：用
display: flex; flex-direction: column;替代，header/footer 设flex: 0 0 auto，中间设flex: 1，现代浏览器支持极好
中间区域内容溢出时滚动失效怎么办？
绝对定位区域默认不产生滚动上下文，即使内容超长，也不会出现内部滚动条——而是把多余内容直接“切掉”或撑破布局。
关键点：滚动行为必须显式启用，且不能依赖父容器 overflow，因为父容器是 relative 定位的空壳，高度为 0。
兼容性与移动端要注意什么？
iOS Safari 对 fixed 定位 + 绝对定位嵌套的渲染有历史问题：键盘弹出时，fixed 元素可能错位，导致中间区域 top/bottom 值失效；Android 某些 WebView 会忽略 bottom 计算。
这不是 bug，是 viewport 缩放和输入法遮罩触发的重排行为。简单方案是回避——但如果你必须用这套布局：
top 和 bottom 就得同步改两处——这在组件化或主题切换场景里特别容易漏。
