给.modal-body加overflow-y:auto没反应，是因为未设max-height导致无高度限制，浏览器无法判断溢出边界；必须显式设置max-height（如calc(100vh - 200px)），并确保内容真正溢出且滚动样式作用于.modal-body本身。
给 .modal-body 加 overflow-y: auto 没反应？先看高度有没有边界
不是 CSS 写错了，而是 overflow-y: auto 在没有明确高度限制的容器里根本不生效。浏览器需要知道“从哪开始截断”，才会触发滚动条。
-
.modal-body必须显式设max-height（比如max-height: calc(100vh - 200px)），不能只靠height: 100%—— 父级.modal-dialog是弹性布局，百分比高度会失效 - 避免把长内容直接塞进
.modal-content或绕过.modal-body；结构必须是标准三层：.modal-dialog > .modal-content > .modal-body - 如果用了
display: flex或position: absolute子元素，它们可能脱离文档流，进一步破坏高度计算逻辑
.modal-dialog-scrollable 为什么还是不能滚？检查 DOM 和约束链
这个类只作用于 .modal-dialog，它设了 max-height 和 overflow-y: auto，但滚动最终由内容容器决定。一旦内容没走 .modal-body，或被 JS 动态清空/替换，就形同虚设。
- 用 DevTools 检查实际渲染的 DOM：确认
.modal-body存在且包含内容，没被框架（如 Vue/React）意外移除 - 移动端 iOS Safari 对
vh单位敏感，地址栏收起时会重算，导致max-height: 60vh突然变小；改用像素减法更稳：max-height: calc(100vh - 200px)（200px 是 header + footer + padding 实测总和） - 异步加载内容后，记得重新确认
max-height是否仍足够 —— 如果内容撑高了但 max-height 没更新，滚动条会消失
模态框打开时页面还能滚？别硬写 body { overflow: hidden }
Bootstrap 本意是通过 JS 给 body 加 modal-open 类来控制滚动，但这个机制常被自定义 CSS 覆盖或 JS 干扰。直接写死 body { overflow: hidden } 会破坏关闭后的恢复逻辑，导致页面永久锁死。
- 正确兜底方式是：
body.modal-open { overflow: hidden !important }，确保这条规则加载在 Bootstrap CSS 之后 - 检查是否在全局样式中写了
body { padding-right: 0 !important }或重置了box-sizing—— 这些会干扰 Bootstrap 的滚动条宽度补偿 - 如果用了自定义滚动条（如
scrollbar-width: none），要同步调整--bs-body-scroll-x变量值，否则补偿留白不准
iOS Safari 上滚动条闪现又消失？vh 不可靠，得靠实测像素
iOS Safari 的视口单位行为特殊：地址栏展开/收起时会重算 vh，导致 max-height 突然收缩，内容被截断、滚动条抽搐。这不是 Bug，是它的渲染策略。
- 放弃依赖
60vh或80vh这类估算值；用calc(100vh - Xpx)，X 是 header、footer、padding 的真实像素总和（建议实测，而非设计稿标注） - 如果 header 高度动态变化（比如响应式导航栏），需在
shown.bs.modal事件后读取并设置.modal-body.style.maxHeight，注意加节流 - 不要用
window.innerHeight初始化 —— 初始值常不准，尤其在页面未完全渲染时
真正麻烦的不是选哪种方案，而是第三方库或重置 CSS 是否悄悄改了 body 的 overflow、padding 或 position —— 这些隐性覆盖往往比技术细节更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
