.modal-header和.modal-footer会跟着滚动消失是因为.modal-content未设高度且.modal-body未设flex:1，导致其无法撑满剩余空间；需设.modal-content高度并给.modal-body加flex:1才能固定头尾。
为什么.modal-header和.modal-footer会跟着滚动消失
这不是 bug，是 Bootstrap 5 的 flex 布局设计决定的：.modal-content 是 flex-column，但 .modal-body 没设 flex: 1，高度完全由内容撑开，头尾自然“浮”走。哪怕你加了 max-height 和 overflow-y: auto，只要 .modal-body 不占满剩余空间，.modal-footer 就不会钉在底部。
让头部和尾部真正固定的关键 CSS
核心是把 .modal-content 变成一个高度受控的 flex 容器，并让 .modal-body 吃掉所有中间空白：
-
.modal-content必须设明确高度（如height: 80vh或max-height: 80vh），否则 flex 无基准可依 -
.modal-body加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它才会撑满剩余空间 -
.modal-footer保持默认flex-shrink: 0，天然不被压缩；无需额外定位 - 别用
position: absolute—— 会破坏 flex 结构，在modal-lg等断点下宽度错乱、footer 被截断
示例：
.modal-content {
height: 80vh;
}
.modal-body {
flex: 1;
overflow-y: auto;
}
Modal 里有表格时，表头怎么随滚动固定
如果 .modal-body 里是 <table>，且希望 <code><thead> 随滚动固定，<code>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-centered 只控制整个 .modal-dialog 在视口中的初始垂直位置，和内部头尾是否固定无关。它甚至不影响 .modal-body 的 flex 行为。
最容易被忽略的是：flex 布局依赖父容器高度，而 .modal 默认高度由内容决定，不设 height 或 max-height，flex: 1 就没意义——这点和普通容器完全不同。
