height: 100% 会让 sticky 失效，因为它不产生实际高度，仅继承父级值；若祖先无明确高度，计算后父容器高度为0，导致无滚动上下文，sticky 逻辑根本不触发。
因为 height: 100% 不提供可滚动上下文，sticky 元素根本不会进入粘性逻辑流程。
为什么 height: 100% 会让 sticky 失效
浏览器判断 sticky 是否生效，第一步就是检查直接父容器是否有「非零可滚动高度」——而 height: 100% 本身不产生高度，它只是继承父级的 height 值。如果祖先链中任意一级没设明确高度（比如 html、body 或布局容器），那 height: 100% 最终计算为 auto 或 0px，父容器 computed height 就是 0。
此时：
- 容器无溢出空间 → 不出现滚动条 → 浏览器跳过 sticky 行为
- DevTools 的 Computed 面板里
position显示为static，哪怕你写了top: 0 - 不是“没粘住”，而是“压根没启动”
常见错误写法与替代方案
以下写法在多数现代布局中都会导致 sticky 失效：
-
parent { height: 100%; }—— 没有锚定高度来源，等价于无效 -
html, body { height: 100%; } .container { height: 100%; }—— 仍依赖视口高度，但若内容未撑开，滚动上下文仍可能丢失 -
.scroll-container { height: 100%; overflow-y: auto; }—— 容器高度被锁死，无法随内容扩展，sticky 滚到边界就掉
✅ 推荐替换为：
-
min-height: 100vh：保证最小视口高度，同时允许内容自然撑高 -
height: fit-content+max-height: 100vh+overflow-y: auto：适用于弹窗内表格表头等场景 - 在 Flex/Grid 布局中，显式分配高度轨道，例如
grid-template-rows: auto 1fr或flex: 1并确保父级有min-height
如何快速验证和调试
打开 DevTools，选中 sticky 元素的**直接父容器**，看 Layout 面板里的「Layout Bounds」：
- 如果显示
Height: 0px，sticky 必然不生效；临时加min-height: 1px就能确认是否是这个原因 - 检查 computed
overflow值：只要路径上任意祖先有overflow: hidden、auto或scroll，sticky 就会被锚定到那一层 —— 即使那一层当前没滚动条 - 检查 computed
display：父容器不能是inline-flex、inline-grid或contents，它们不创建 BFC，sticky 被规范忽略 - 用
border: 1px solid red临时包裹父容器，肉眼确认它是否真有渲染区域和滚动能力
真正卡住 sticky 的，往往不是 top 值写错，而是某一层祖先悄悄关掉了滚动上下文——它不报错，也不警告，只默默把 position 重置为 static。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
