局部滚动容器必须有明确高度约束，否则overflow-y:auto不生效；需用max-height、calc()、flex:1或100dvh等显式设高，并确保高度链完整贯通。
局部滚动容器必须有明确高度约束
没有显式高度（或 max-height）的 div 即使设了 overflow-y: auto 也不会滚动——浏览器根本不知道“哪里算溢出”。常见错误是只写 height: 100%，但父级没高度，子级的 100% 就是 0px。
正确做法是：向上追溯到一个有确定高度的祖先（通常是 html、body 或 flex 容器），再用以下任一方式之一设定容器自身高度：
-
height: calc(100vh - 120px)：减去 header + footer 高度，适合固定头尾布局 -
max-height: 400px：硬性上限，内容超长即触发滚动 -
flex: 1：当父容器是display: flex且设了flex-direction: column时，该子项会撑满剩余空间 -
height: 100dvh：比100vh更可靠，能响应移动端地址栏收起/展开变化
绝对定位元素内部滚动要绕过脱离文档流问题
position: absolute 的元素默认脱离文档流，其子元素无法继承高度上下文。直接对子 .content 设 height: 100% 无效。
解决路径只有两个方向：
立即学习“前端免费学习笔记（深入）”；
- 把绝对定位容器本身变成
display: flex; flex-direction: column，再让内容区用flex: 1+overflow-y: auto - 放弃
position: absolute，改用position: fixed或嵌套在 flex 布局中——后者更可控 - 若必须用
absolute，则内容区高度必须用calc()手动计算，不能依赖百分比
Bootstrap 5 中 card-body 滚动失效的典型原因
在 .card 内给 .card-body 加 overflow-y: auto 后仍不滚动，大概率是以下三个条件没同时满足：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
.card必须有明确高度（如height: 500px或max-height: 500px） -
.card-body不能设height: 100%，而应设max-height: 100%+overflow-y: auto - 整个页面的
html, body要加overflow: hidden，否则滚动会“穿透”到全局
Bootstrap 自带的 .h-100 类只作用于自身，不传递高度给子元素；它只是 height: 100% 的快捷写法，依然受父级高度限制。
scroll-padding-top 对局部滚动容器也生效
当局部容器（比如 .table-wrapper）设置了 overflow-y: auto，且内部有 position: sticky 表头时，锚点跳转或 scrollIntoView() 会把目标行顶到容器顶部，被 sticky 表头遮住。
这时要在该容器上设 scroll-padding-top，而不是写在 html 上：
.table-wrapper {
overflow-y: auto;
scroll-padding-top: 48px; /* 等于 sticky 表头的实际占位高度 */
}注意：这个值必须是表头视觉总高度（含 padding、border、box-shadow），不能凭空猜测；单位推荐用 px 或 rem，避免用 %。
局部滚动真正卡住的地方，往往不是 CSS 属性漏写了，而是高度链断在某一级——从 html 到 body 到布局容器再到滚动区域，中间任意一环没设高或设错单位（比如写了 "100vh" 带引号），都会导致整个链条失效。
