position: sticky 侧边栏滚到底部“掉下去”是因其仅在直接父容器滚动范围内生效，父容器未设 height/max-height 和 overflow-y: auto 则无粘性上下文；用 fixed 需手动避让，flex 布局则可通过 flex-grow + overflow-y: auto 实现可控滚动固定。
直接用 position: sticky 无法让侧边栏“滚动到底部还固定”，它只在父容器滚动范围内生效；真要到底部还卡住，得换思路——要么用 position: fixed + 手动控制高度，要么用 flex 布局配合 overflow-y: auto。
为什么 position: sticky 滚到底就“掉下去”了
这不是 bug，是它的设计逻辑：sticky 只在**直接父容器的滚动区域内**起作用。一旦侧边栏内容超出父容器高度、或父容器本身被滚出视口，粘滞就自动解除。
- 常见现象：侧边栏一开始能粘，往下滚一段后突然跳回原始位置，甚至被截断
- 根本原因：父容器没设
max-height或height，也没配overflow-y: auto，导致没有“可粘的上下文” - 更隐蔽的问题：父容器是
display: flex子项且自身无高度，或带transform/filter，这些都会禁用 sticky - Safari ≤15.4 对 flex 容器内 sticky 支持不稳定，加
min-height: 1px可兜底
position: fixed 实现“始终可见”但必须手动避让
fixed 完全脱离文档流，侧边栏会盖住主内容，所以主内容区必须主动让出空间。
- 侧边栏加：
position: fixed; top: 63px; left: 0; width: 250px; height: calc(100vh - 63px); overflow-y: auto; - 主内容区（如
.main）加：margin-left: 260px; width: calc(100% - 260px); - 注意：
h-full在 fixed 元素上无效，必须用calc(100vh - 63px)显式声明高度 - 若顶部有导航栏高
h-[63px]，侧边栏的top和height必须同步扣减，否则底部留白或溢出
用 flex 布局实现“局部固定+自然滚动”
适合侧边栏嵌在页面中段、不希望它覆盖全局，又想撑满可用高度并支持滚动到底。
- 给侧边栏容器设：
display: flex; flex-direction: column; height: calc(100vh - 63px); - 头部（如 logo 区）和底部（如版权）加：
flex-shrink: 0;+ 明确高度 - 中间导航内容区加：
flex-grow: 1; overflow-y: auto; - 这样导航区会填满剩余空间，内容超长时滚动条出现在内部，不会影响整体布局
- 比 sticky 更可控，也比 fixed 更少遮挡风险，尤其适合管理后台类页面
真正难的不是写哪行 CSS，而是判断“这个侧边栏该属于谁的滚动上下文”。很多人反复调 top 和 z-index，却忘了先检查父容器有没有高度、有没有 overflow、是不是被 flex/grid 的隐式行为悄悄屏蔽了粘性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
