bootstrap如何设置溢出隐藏和滚动条

Bootstrap 5 中 overflow-hidden 和 overflow-auto 生效的前提是父容器有明确宽高；body 滚动需同时设置 html, body {height: 100%; overflow: hidden;}；.card-body 滚动失效主因是布局链断裂，须确保 .card 为 flex-column 容器并设高度。

怎么用 Bootstrap 5 控制 overflow：隐藏 vs 滚动

bootstrap 5 提供了开箱即用的 overflow-hidden 和 overflow-auto 等工具类，但直接套用常失效——根本原因是这些类只改 overflow，不设宽高，而 css 的 overflow 属性对无尺寸约束的元素完全无效。

• overflow-hidden 不是“全局隐藏”，它只裁剪该元素自身内容超出其盒模型边界的部分
• overflow-auto 不会自动让区域可滚动，前提是父容器有明确高度（比如 height: 300px 或 flex-fill）
• 若想在 .card-body 内启用滚动，必须确保它的父级（如 .card）是 flex 容器且设了 flex-direction: column，否则高度无法传递

为什么 body 滚动条关不掉？关键在 height: 100%

很多人加了 overflow-hidden 到 body 却仍能滚页面，是因为 html 和 body 默认高度不占满视口。CSS 的 overflow 在高度未定义时压根不生效。

• 必须同时设置：html, body {height: 100%; overflow: hidden;}
• 如果用了 min-height: 100vh 替代 height: 100%，在某些 iOS Safari 版本下会失效——vh 动态变化时可能触发意外滚动
• 禁用全局滚动后，记得给需要滚动的区域（如 .card-body）加上 flex-fill + overflow-auto，否则它会塌缩成零高度

Card Body 滚动失效的三个典型场景

即使写了 overflow-auto，.card-body 经常还是不滚动——问题几乎都出在布局链断裂上。

• 没给 .card 加 h-100 或 style="height: 100%"：父容器没高度，子元素再设 flex-fill 也撑不起来
• 忘了把 .card 设为 flex 容器：class="card d-flex flex-column" 缺一不可，否则 flex-fill 对 .card-body 无效
• 内容太短，没溢出：overflow-auto 只在内容高度 > 容器高度时才显示滚动条；调试时可用 min-height: 600px 强制触发

SVG 或绝对定位元素被意外裁剪怎么办

当父容器用了 overflow-hidden，里面的 <svg>、position: absolute 元素或 tooltip 常被截断——这不是 Bug，是 CSS 规范行为：overflow 会创建新的层叠上下文和块格式化上下文，把子元素严格框死。

• 解决方法不是去掉 overflow-hidden，而是把 SVG 或弹层移出该容器 DOM 结构（例如挂到 body 下）
• 如果必须保留在原位置，可用 overflow: visible 覆盖，但要小心：这会让内部滚动失效，且可能破坏响应式布局
• 切记：任何 overflow 设置都要求父元素有明确宽高，否则浏览器无法计算“溢出”的基准

实际项目里最常漏掉的，就是 height: 100% 这一行——它看着像装饰，其实是整个 overflow 行为的开关。