Flex布局是实现header+content+footer固定+滚动最可靠方案，核心是容器设height和flex-column，.content需同时满足flex:1、overflow-y:auto、min-height:0三条件，缺一不可。
Flex 布局是目前最可靠、语义清晰、兼容性好且无需硬编码高度的解法。用 position: fixed 或 position: sticky 都可能因脱离文档流、滚动上下文缺失或祖先 overflow: hidden 导致失效；而传统 calc(100vh - headerHeight) 在动态高度头部（如多行导航、响应式字号）下根本不可靠。
Flex 布局实现「header + content + footer」固定+滚动
核心是让容器成为 flex，子项按列堆叠，.content 用 flex: 1 占满剩余空间，并显式重置其最小高度约束：
-
.page必须设height（如100vh或具体像素），且display: flex; flex-direction: column -
.header和.footer不设height也行，但建议加flex-shrink: 0防被压缩 -
.content必须同时满足：①flex: 1；②overflow-y: auto；③min-height: 0（缺一不可） - 若
.content内还有嵌套 flex 容器（如左右分栏），其直接子项也需加min-height: 0
.page {
height: 100vh;
display: flex;
flex-direction: column;
}
.header, .footer { flex-shrink: 0; }
.content {
flex: 1;
overflow-y: auto;
min-height: 0; /* 关键！否则 overflow 形同虚设 */
}为什么 min-height: 0 不可省略？
这是 Flex 子项的默认行为陷阱：即使你设了 flex: 1 和 overflow-y: auto，浏览器仍会按内容撑开 .content，导致整个页面滚动而非局部滚动。因为 flex item 默认有 min-height: auto，它会阻止收缩到比内容更小的高度。
- 不加
min-height: 0→.content高度 = 实际内容高度 → 滚动条出现在body上 - 加了
min-height: 0→.content高度 = 父容器分配的空间 →overflow-y: auto才真正生效 - 在 Tailwind 中对应
min-h-0，不是h-0或min-h-full
position: sticky 失效的三个硬条件
看似简单，但浏览器只在同时满足以下条件时才激活粘性定位：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
top或bottom值必须明确设置（如top: 0） - 最近的滚动祖先（即能触发滚动的那个父容器）必须有
overflow-y: auto或scroll，且自身有明确高度（height/max-height/flex分配） - 该祖先及其任意上层祖先都不能有
overflow: hidden或clip（哪怕只是临时为模态框加的）
常见失败场景：body 上临时加了 overflow: hidden 来禁用背景滚动，结果全站 sticky 全部失效。
表格中仅 tbody 滚动的语义化写法
不要给 tbody 加 position: absolute——这破坏表格语义和可访问性。推荐用 display: grid 替代传统 table 布局，或用包裹容器控制滚动上下文：
- 用
<div class="table-wrapper"><table>...</table></div>包裹整表 - 给
.table-wrapper设height: 300px; overflow-y: auto - 给
thead设position: sticky; top: 0; background: white; z-index: 1 - 确保
.table-wrapper的父级没有overflow: hidden
真正麻烦的从来不是“怎么让它滚动”，而是“怎么让它只在该滚的地方滚，且不影响语义、可访问性和后续维护”。min-height: 0 这一行，90% 的人第一次都会漏掉。
