局部滚动失效的根本原因是父容器未截断高度链，需用h-screen→flex-col→overflow-hidden→flex-1→h-full结构确保高度继承；overflow-y: auto优先于scroll；table表头固定应使用sticky而非修改display。
局部滚动失效？先确认父容器是否截断高度链
纯 CSS 局部滚动最常见的失败不是 overflow-y: auto 写错了，而是它根本没机会生效——因为父级没给明确高度约束，子元素就“撑开”了整个布局，滚动条自然不出现。关键在于：CSS 中 height: 100% 或 h-full（Tailwind）只继承「已计算出的高度」，而浏览器默认不会给 div 设高度。
必须有一层祖先容器显式承接视口高度，并用 overflow: hidden 截断溢出，才能让内部尺寸计算以视口为边界。否则再套十层 overflow-y: scroll 都是白搭。
最简可靠结构：h-screen → flex-col → overflow-hidden → flex-1 → h-full
这是现代布局中兼容性好、语义清晰、无 JS 的最小可行组合。不需要计算像素、不依赖 JS 测量，也不用写 calc(100vh - 80px) 这类易错表达式。
-
h-screen：让最外层占满视口高度 -
flex-col+overflow-hidden：强制弹性容器不向外溢出，为子项提供可继承的高度上下文 -
flex-1：让中间内容区自动填满剩余空间（比如 header 占高后剩下的部分） -
h-full+overflow-y-auto：滚动区域继承父高并启用纵向滚动
示例结构：
<div class="h-screen flex flex-col overflow-hidden">
<header class="h-16">导航</header><main class="flex-1 p-4"><div class="h-full overflow-y-auto">
<div>很多内容...</div>
<div>很多内容...</div>
</div>
</main>
</div>
overflow-y: auto 还是 scroll？别被视觉误导
overflow-y: auto 只在内容超长时显示滚动条；overflow-y: scroll 强制显示（哪怕没内容），但会占用固定宽度（尤其在 Safari 中可能挤窄内容）。实际项目中建议优先用 auto，除非设计明确要求常驻滚动条。
注意两个典型陷阱：
- 父容器有
padding或border，但没用box-sizing: border-box，导致h-full实际可用高度变小，内容刚溢出一点就触发滚动——看着像“卡顿”，其实是高度被吃掉了 - 滚动容器内用了
display: grid或flex且子项未设min-height: 0，某些浏览器下会阻止收缩，导致h-full失效
table 表头固定 + tbody 滚动？别改 display
想让表格表头固定、主体滚动，千万别把 <table> 改成 <code>display: block——这会破坏表格语义，导致 border-collapse 失效、边框错位、thead 和 tbody 渲染异常。
正确做法是保持原生 <table> 结构，仅对 <code><thead> 加 <code>position: sticky; top: 0，再给整个 <table> 设 <code>max-height 和 overflow: hidden，滚动行为由 <tbody> 自然承载：<pre class="brush:php;toolbar:false;"></pre>
<table class="max-h-96 overflow-hidden">
<thead class="sticky top-0 bg-white"><tr>
<th>姓名</th>
<th>年龄</th>
</tr></thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
<p>真正容易被忽略的是：sticky 元素的祖先不能有 <code>transform、filter 或 will-change，否则 sticky 会失效——这个限制没有报错，也不提示，只能靠排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
