sticky 失效主因是 height: 100% 导致父容器实际高度为 0 或不可滚动，使 sticky 缺乏可滚动包含块；改用 min-height: 100vh 可确保至少一屏高且允许内容撑开，维持滚动上下文。
父容器 height: 100% 导致 sticky 失效
不是 height: 100% 本身错，而是它常让父容器“实际高度为 0”或“无法滚动”，sticky 就没锚点可依。浏览器要求 sticky 元素必须在一个**可滚动的包含块**里才能激活，而 height: 100% 在多数场景下只是复制祖先高度——如果祖先没显式高度（比如 body 没设 min-height 或 height），那它最终算出来就是 0。
-
height: 100%是相对计算值，依赖父级有确定高度；若父级高度塌陷（如未清除浮动、flex 容器未设align-items: stretch），子级的100%就是 0 - 即使父级有高度，
height: 100%会锁死容器高度，内容超长时溢出被裁剪（尤其配合overflow: hidden），导致内部根本不可滚动 → sticky 不触发 - 常见组合陷阱：
html { height: 100%; } body { height: 100%; }—— 这会让body高度固定为视口高，内容撑不开，滚动发生在html上，而 sticky 元素在body内，锚定失败
为什么用 min-height: 100vh 更可靠
min-height: 100vh 允许容器随内容自然撑高，同时保证至少占满一屏，这才是 sticky 所需的「可滚动上下文」基础。它不截断滚动流，也不强制裁剪内容。
- 对比：
height: 100vh锁死高度 → 滚动发生在外部（如html），sticky 元素锚定不到；min-height: 100vh则把滚动保留在本容器内 - Grid / Flex 布局中更明显：若父容器是
display: grid且设了height: 100%，但子项没填满，整个容器高度仍可能塌陷；换成min-height: 100vh+grid-template-rows: auto 1fr，sticky 区域就能稳住 - 实操建议：对根容器（如
.page或main）优先用min-height: 100vh，而非height: 100%或height: 100vh
sticky 元素自身设 height: 100% 的副作用
sticky 元素内部如果写了 height: 100%，容易引发高度塌陷或布局错位，间接导致定位异常——尤其当它的父容器高度不确定时，100% 无从参照，计算结果可能是 0 或意外值。
- 例如：
.navbar { position: sticky; top: 0; height: 100%; }—— 若父容器没高度，这个100%就失效，navbar 高度坍缩，甚至影响文档流，进一步破坏滚动上下文 - sticky 元素应使用明确尺寸（如
height: 60px）或基于内容的高度（height: auto），避免依赖百分比高度 - 若需撑满可用
min-height: 60px+display: flex对齐，比height: 100%更可控
如何快速验证是不是 height 导致的问题
打开 DevTools，选中 sticky 元素，在「Computed」面板看 position 的最终值：如果是 static，说明已被降级；再往上逐层检查父节点的 height、min-height 和 overflow 计算值。
- 临时给疑似问题父容器加
outline: 1px solid red，看它是否真有高度；若 outline 看不见，大概率高度为 0 - 在控制台运行
getComputedStyle(document.querySelector('.parent')).height，确认是否返回0px或auto - 把父容器的
height: 100%改成min-height: 100vh，再刷新观察 sticky 是否恢复 —— 这是最直接的验证方式
真正卡住 sticky 的，往往不是你漏写了 top，而是某个看似无关的 height: 100% 在上游悄悄切断了滚动链。改一个属性，有时比写十行 JS 更快见效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
