Bootstrap的modal-fullscreen类仅实现宽度全屏和去除边距，不设置高度；要真全高需配合100dvh、.modal-body的max-height与overflow-y: auto，并处理移动端安全区。
Bootstrap 模态框默认不撑满视口高度，即使加了 modal-fullscreen，内容少时它也不会“拉伸”填满整个屏幕——因为 .modal-content 是 display: block，高度由内容决定，不是由视口驱动。
modal-fullscreen 类为什么没让模态框“真全高”
Bootstrap 5.2+ 的 modal-fullscreen 主要控制宽度（width: 100%、max-width: 100vw）和去除外边距，但它**不设高度**。它的 CSS 规则里没有 height: 100vh 或 min-height，所以当内容很短时，.modal-content 高度仍只是内容自身高度，顶部/底部会留大片空白。
- 检查浏览器开发者工具，你会看到
.modal-content的 computed height 小于100vh -
modal-fullscreen不等于 “全屏+全高”，它只解决“宽度铺满”和“去边距”两个问题 - 如果你用的是 Bootstrap 5.1 或更早版本，
modal-fullscreen根本不存在，CSS 规则为空
给 modal-content 加 height: 100vh 的风险
直接在 .modal-content 上写 height: 100vh 看似简单，但容易引发滚动异常或内容截断：
- 移动端 Safari 对
vh单位有地址栏缩放 bug，滚动时高度会跳变；推荐改用100dvh（2023 年后支持，当前（2026）已广泛可用） -
.modal-content有默认 padding（1rem），设height: 100dvh后，内容区实际可用高度 =100dvh - 2rem，长内容会溢出 - 如果模态框含
.modal-header和.modal-footer，它们会撑高.modal-content，导致.modal-body可用空间进一步压缩 - 不要对
.modal-content设overflow: hidden——它会裁掉阴影、圆角，且关闭按钮可能被遮挡
真正可控的全高方案：用 flex + max-height 控制 .modal-body
最稳定的做法是保持 .modal-content 自然高度，把高度约束交给 .modal-body，并启用内部滚动：
- 确保模态框结构正确：
<div class="modal"><div class="modal-dialog modal-fullscreen"><div class="modal-content"><div class="modal-body">...</div></div></div></div> - 给
.modal-body加：max-height: calc(100dvh - 120px); overflow-y: auto;（120px 是 header + footer + padding 的估算值，按实际调整） - 避免在
.modal-body写height: 100%——它的父级.modal-content没设高度，结果是 0 - 如果需要“内容少时也撑满”，可加
min-height: calc(100dvh - 120px)到.modal-body，但注意小屏下可能造成底部空白过厚
移动端状态栏遮挡（iOS Safari）怎么修
即使用了 100dvh，iOS Safari 在某些横屏或页面滚动后仍可能把 .modal-header 顶到状态栏下面：
- 不要调
.modal-dialog的margin-top——会破坏居中逻辑 - 给
.modal-header加：padding-top: env(safe-area-inset-top); - 同时确保
viewportmeta 中启用了安全区：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 这个
env()值在 Android Chrome 中无效，但无害；不支持时会回退为 0
全屏模态框的高度行为不是靠一个 class 或一个 CSS 属性就能搞定的，它依赖 modal-dialog 宽度控制、modal-content 布局模式、modal-body 高度约束、以及移动端安全区处理四者协同——漏掉任意一环，都可能在某台设备上出现留白、截断或滚动失效。
