sticky侧边栏底部被截断的根本原因是父容器高度不足且未撑满视口，position: sticky仅在父容器可滚动范围内生效；需确保父容器高度≥100vh、无overflow:hidden、flex-shrink:0，并避免在overflow容器内使用sticky。
sticky侧边栏底部被截断或不粘底
常见现象是 position: sticky 的侧边栏在滚动到页面底部时突然“消失”或停在半空，不是贴着容器底，更不是贴着视口底。根本原因不是 sticky 写错了，而是它的父容器高度不够——sticky 只在**父容器可滚动范围内**生效，一旦父容器本身没撑满视口，它就无底可粘。
- 确保侧边栏的直接父容器（比如
.sidebar-wrapper）高度至少为100vh，且不能有overflow: hidden - 如果父容器是 flex 项目，检查是否被
flex-shrink: 1压缩了高度；建议显式设flex-shrink: 0 - 避免把
sticky元素放在height: 0或min-height: 0的 flex 子项里——Chrome 会直接禁用 sticky
calc(100vh - headerHeight) 高度计算失效
想让侧边栏内容区填满剩余空间，常写 height: calc(100vh - 80px)，但实际高度不对：要么溢出滚动，要么留白。问题不在 calc 语法，而在于你减的 80px 是静态值，但真实 header 高度可能随响应式、字体缩放、行高变化而浮动。
- 优先用 CSS 自适应方案：给侧边栏父容器设
display: flex; flex-direction: column，header 固定高度，内容区用flex: 1占满剩余空间 - 若必须用
calc，改用相对单位，比如calc(100vh - var(--header-height, 64px))，并在 JS 或 :root 中动态更新--header-height - 注意
100vh在 iOS Safari 中可能包含地址栏高度，导致计算偏大；可改用100dvh（需检查兼容性）
sticky + flex 布局下 bottom 失效
很多人以为加个 bottom: 0 就能让 sticky 元素粘到底部，但 position: sticky **不支持 bottom 粘贴方向**——它只响应 top（向上滚动时触发）和 left/right（水平滚动），bottom 在所有浏览器中都被忽略。
- 真正实现“粘底”，得靠容器高度 + sticky 的
top值反向控制：把侧边栏内容区设为position: sticky; top: calc(100% - 100vh)，前提是父容器高度 ≥ 视口 - 更稳的替代方案：用
position: absolute+inset-block-end: 0（现代写法），但需确保父容器position: relative且高度可控 - 别依赖
bottom: 0和sticky组合——这不会生效，只会让你调试半小时
移动端 Safari 中 sticky 行为异常
iOS 15.4+ 虽支持 sticky，但存在两个隐蔽坑：一是当侧边栏在 overflow-y: auto 的容器内时，滚动容器而非页面主体，sticky 会完全失灵；二是键盘弹出后视口高度突变，100vh 不重算，导致 calc 高度错位。
立即学习“前端免费学习笔记（深入）”；
- 避免在
overflow容器里嵌套 sticky 侧边栏；如必须，改用 IntersectionObserver 模拟粘性行为 - 监听
resize事件，检测window.visualViewport?.height变化，动态更新--vhCSS 变量 - 对 iOS 加一层降级：用
@supports not (position: sticky)提供 fixed + JS 滚动监听的备选方案
最易被忽略的一点：sticky 的“粘性边界”由最近的具有滚动机制的祖先决定，而不是视口。哪怕你写了 top: 0，只要上层某个 div 设置了 overflow: auto 且高度有限，sticky 就永远粘不到视口底——先查 DOM 结构，再调样式。
