<p>.modal-body加overflow-y:auto没反应，是因为未设max-height导致无高度限制，浏览器无法判断溢出边界；必须显式设置max-height（如calc(100vh - 200px)），并确保内容真正溢出且滚动样式作用于.modal-body本身。</p>
为什么给 .modal-body 加 overflow-y: auto 没反应
不是 CSS 写错了，而是高度缺失导致 overflow 失效。CSS 中 overflow-y: auto 只在容器有「可计算的、受限的高度」时才触发滚动条。Bootstrap 的 .modal-body 默认是 height: auto，父级 .modal-dialog 也没设高度约束，整个链路没边界，浏览器就不知道“该在哪截断”，自然不滚。
-
.modal-body必须显式设置max-height（推荐用max-height: calc(100vh - 200px)，比60vh更稳，避开 iOS Safari 的视口缩放 bug） - 避免用
height: 100%—— 它依赖父容器有明确高度，而.modal-dialog是弹性收缩的，百分比会失效 - 如果
.modal-body里用了display: flex或position: absolute子元素，它们可能撑开或脱离文档流，进一步破坏高度计算
.modal-dialog-scrollable 为什么内部还是不能滚
这个类本身只作用于 .modal-dialog，它设了 max-height: calc(100vh - 1rem) 和 overflow-y: auto，但滚动行为最终由内容容器决定。如果内容直接塞进 .modal-dialog 而没经过 .modal-body，或者 .modal-body 被意外移除/替换，那 .modal-dialog-scrollable 就形同虚设。
- 确保结构是标准的：
<div class="modal-dialog"><div class="modal-content"><div class="modal-body">...</div></div></div> - 不要把长内容直接写在
.modal-content里，绕过.modal-body - 检查是否被 JS 动态清空或替换了
.modal-body的 DOM —— 异步渲染后记得重新确认 height 约束是否还在
移动端 iOS Safari 上 vh 单位滚动失效怎么办
iOS Safari 在地址栏收起/展开时会重算 vh，导致 max-height: 60vh 突然变小，滚动条闪现又消失，甚至内容被截断。这不是 Bug，是 Safari 对视口单位的特殊处理逻辑。
- 改用固定像素减法：
max-height: calc(100vh - 200px)，其中200px是 header + footer + padding 的总和（实测值，非估算） - 如果 header 高度动态变化（比如响应式导航栏），用 JS 监听
resize并更新style.maxHeight，但注意节流 - 避免依赖
window.innerHeight初始化 —— 初始值可能不准，建议在shown.bs.modal事件后读取
滚动条样式怎么统一到 .modal-body
Chrome/Edge 可用 ::-webkit-scrollbar，Firefox 则完全不支持该伪元素，硬写只会让 Firefox 用户看到原生丑 scrollbar。
立即学习“前端免费学习笔记（深入）”；
- 仅 Chrome/Edge 有效：
.modal-body::-webkit-scrollbar { width: 8px; }、.modal-body::-webkit-scrollbar-thumb { background: #a0a0a0; } - Firefox 下无 CSS 方案，必须引入轻量 JS 库（如
overlay-scrollbars），并绑定到.modal-body实例 - 别对
.modal或.modal-dialog设置滚动条样式 —— 它们默认overflow: hidden，伪元素不生效
实际滚动是否生效，最准的验证方式是：打开 DevTools → 选中 .modal-body → 在 Styles 面板看 computed 值里 overflow-y 是否为 auto，且 max-height 是一个具体数值（不是 none 或 auto）。这两项缺一不可。
