当使用 position: sticky 的元素在滚动时意外脱离粘性行为，往往是因为其包含块（containing block）高度受限所致；将固定高度 height: 100vh 改为最小高度 min-height: 100vh 即可恢复预期粘性效果。
当使用 `position: sticky` 的元素在滚动时意外脱离粘性行为，往往是因为其包含块（containing block）高度受限所致；将固定高度 `height: 100vh` 改为最小高度 `min-height: 100vh` 即可恢复预期粘性效果。
在现代 CSS 布局中，position: sticky 是实现“滚动吸附”效果（如固定页头、侧边导航）的首选方案，但其行为高度依赖于最近的具有滚动上下文的祖先容器。一个常被忽视的关键点是：sticky 元素的粘性范围仅限于其包含块的尺寸边界内。
在你提供的代码中，.page 设置了 height: 100vh —— 这意味着无论内容多长，该容器的高度都被严格限制为视口高度。而 .main 区域中的多个 .item 元素会撑开内容高度，但由于 .page 的高度被“截断”，浏览器实际创建的滚动容器变成了 .main（或更外层的
），导致 .header 的 sticky 行为失去有效的滚动上下文，从而在滚动一定距离后“消失”。✅ 正确解法是：移除 .page 的固定高度约束，改用 min-height: 100vh。这样既保证页面初始高度不低于视口，又允许其随内容自然扩展，使整个 .page 成为有效的滚动容器（前提是未被其他规则阻止），从而使 .header 的 top: 0 在整个滚动生命周期内持续生效。
以下是修正后的核心 CSS 片段：
.page {
min-height: 100vh; /* ✅ 关键修改：从 height → min-height */
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto;
grid-template-areas:
"header header header"
"nav main main";
}
.header {
position: sticky;
top: 0;
height: 120px;
background: #1e88e5;
grid-area: header;
}
.nav {
background: #e53935;
grid-area: nav;
/* 移除 height: 100% —— 它在 grid 中可能引发隐式循环依赖 */
}
.main {
background: #43a047;
grid-area: main;
overflow-y: auto; /* 可选：显式启用内部滚动（若需局部滚动） */
}
.item {
height: 50px;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
}
? 重要注意事项：
- 不要给 .nav 设置 height: 100%：在 Grid 布局中，100% 高度可能因父容器未明确高度而计算为 0，甚至触发渲染异常；
- 确保 sticky 元素的祖先中没有设置 overflow: hidden | auto | scroll（除非你明确希望该祖先成为滚动容器），否则会截断 sticky 范围；
- sticky 的生效还依赖于 top/bottom/left/right 值是否合理，且元素不能是 display: block 以外的某些特殊显示类型（如 table-row）；
- 若仍不生效，可通过浏览器开发者工具检查 .header 的“Computed”面板，确认 position 是否被覆盖，以及 Containing Block 是否指向预期容器。
总结来说，min-height 替代 height 是解决 sticky 失效最轻量、最普适的方案之一——它尊重内容流，同时保障布局基础高度，是响应式 sticky 实践中的关键习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
