.modal-header 和 .modal-footer 默认不固定，因 .modal-content 为 flex-column 且 .modal-body 缺少 flex: 1，需设 .modal-content { height: 100% }、.modal-body { flex: 1 }、.modal-footer { flex-shrink: 0 } 实现真固定。
modal 的 .modal-header 和 .modal-footer 默认不固定——内容一长，它们就跟着滚动消失。这不是 bug，是 bootstrap 5 的 flex 布局设计决定的：.modal-content 是 flex-column，但 .modal-body 没设 flex: 1，所以高度由内容撑开，头尾自然“浮”走。
让 .modal-header 和 .modal-footer 真正钉在顶部/底部
核心是把 .modal-content 变成一个高度受控的 flex 容器，并让 .modal-body 占满剩余空间：
-
.modal-content必须设height: 100%（或明确高度，如max-height: 80vh），否则 flex 无基准 -
.modal-body加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它才会撑满中间空白 -
.modal-header和.modal-footer保持默认flex-shrink: 0，天然不被压缩 - 别用
position: absolute——会破坏 flex 结构，在响应式断点（如modal-lg）下宽度错乱、footer 被截断
示例 CSS：
.modal-content {
height: 80vh;
}
.modal-body {
flex: 1;
overflow-y: auto;
}
.modal-body 滚动时表头怎么固定
如果 Modal 里有表格，且希望 <thead> 随 <code>.modal-body 滚动而固定，用 position: sticky 最轻量：
- 只对每个
<th> 设置 <code>position: sticky; top: 0;（比设<tr> 更稳妥，避免被 Bootstrap 的 flex 表格封装干扰） <li><code><table> 的直接父容器（即 <code>.modal-body）必须有max-height和overflow-y: auto，否则无滚动上下文，sticky 不触发 - IE 和旧 Edge 不支持
sticky，无优雅降级；若需兼容，得换bootstrap-table插件 +data-height - 注意层叠上下文：如果
.modal-body有transform或will-change，可能截断 sticky 效果 - 常见误操作：把
modal-dialog-centered加到.modal或.modal-content上——完全无效，必须加在.modal-dialog - 更隐蔽的问题：第三方 CSS（比如某些 Admin 主题）可能覆盖
.modal的display: flex或align-items: center，导致居中失效；用 DevTools 查.modal的 computeddisplay和align-items比反复试 class 更快 -
modal-dialog-centered和modal-dialog-scrollable可共存，但后者只管 body 滚动，前者只管初始定位——滚动后头尾是否固定，仍取决于上面说的 flex 配置
为什么加了 modal-dialog-centered 头尾还是跑偏
modal-dialog-centered 只控制整个 .modal-dialog 在视口中的初始垂直位置，和内部头尾是否固定无关。它甚至不影响 .modal-body 的 flex 行为。
真正卡住人的地方不是代码写不对，而是忘了 .modal-content 需要高度约束这个前提——没高度，flex 就没空间可分，flex: 1 直接失效，header/footer 自然飘走。
