Bootstrap模态框底部高度溢出问题的解决方案咨询

针对你遇到的React Bootstrap模态框内容溢出问题，以下是直接有效的解决方法：

核心修复思路 #

问题根源在于模态框主体的滚动约束未正确生效，只需给Modal.Body配置合理的高度限制和滚动属性，同时约束模态框整体的视占比即可解决。

1. 给Modal.Body添加滚动与高度限制 #

修改Modal.Body的代码，通过内联样式或自定义类实现垂直滚动：

<Modal.Body style={{ maxHeight: 'calc(100vh - 150px)', overflowY: 'auto' }}>
  {/* 原有内容 */}
</Modal.Body>

• calc(100vh - 150px)：计算主体最大高度，减去模态框头部和底部操作区的预留空间（可根据实际布局调整数值），确保模态框整体不超出屏幕可视范围。
• overflowY: 'auto'：当内容超过最大高度时，自动显示垂直滚动条，头部和底部区域始终保持可见。

2. 优化模态框整体宽度（可选） #

若模态框在大屏上宽度过宽导致内容横向溢出，可给Modal添加最大宽度限制：

<Modal show={show} style={{ maxWidth: '900px', margin: '0 auto' }}>
  {/* 原有内容 */}
</Modal>

3. 修复嵌套表格的溢出问题（可选） #

内部嵌套的表格可能引发横向溢出，给外层表格添加Bootstrap响应式类：

<Table bordered responsive>
  {/* 表格内容 */}
</Table>

responsive类会让表格在小屏幕上自动生成横向滚动条，避免内容撑破模态框容器。

完整修改后的代码示例 #

const ModalsPreviewHTKP = ({ show, onHide, defaultValues }) => {
  const resData = defaultValues?.id;

  return (
        <Modal show={show} style={{ maxWidth: '900px', margin: '0 auto' }}>
            <Modal.Header className='txt-blue-grey-700 text-bold header-md'>
                <span className='mx-auto'>PRATINJAU HTKP</span>
                <button type="button" className="btn-close m-0 p-0" aria-label="Close" onClick={onHide}></button>
            </Modal.Header>
            <Modal.Body style={{ maxHeight: 'calc(100vh - 150px)', overflowY: 'auto' }}>
              <div className='d-flex gap-2 mb-3 justify-content-center'>
                <img src={iconCard} alt="icon rumah sakit"/>
                <div style={{ lineHeight: '1.5em' }}>
                  <p>RS KASIH IBU BANDUNG</p>
                  <p>Jl. Cibolerang No. 23 Bandung 40225 <br/>
                    Telp: 022-8876-4532, Fax: (022)</p>
                </div>
              </div>

              <Table bordered responsive>
                <tr>
                  <th>Nama Pasien</th>
                  <td>Udin Solehatun</td>
                </tr>
                <tr>
                  <th>Nama Dokter</th>
                  <td>Ahmad Pratama</td>
                </tr>
                <tr>
                  <th>Tanggal Resep</th>
                  <td>07-05-2021, 16:30 WIB</td>
                </tr>
                <tr>
                  <th>No. Resep Dokter</th>
                  <td>10/RI</td>
                </tr>
                <tr>
                  <th>Unit</th>
                  <td>Ruang Bersalin (VK)</td>
                </tr>
                <tr>
                  <th>Nasabah</th>
                  <td>Umum</td>
                </tr>
                <tr className='border-0'>
                  <td>
                    <div className='d-flex flex-column' style={{ lineHeight: 1.5 }}>
                      <span>Abbotic 125 Mg 30 Ml Syrup</span>
                      <span>1x1 Tab Sesudah Makan (Dihabiskan)</span>
                    </div>
                  </td>
                  <td>No. 1</td>
                </tr>
                  <tr>
                    <td colSpan={2}>
                      <Table style={{ border: '1px solid black', textAlign: 'center' }}>
                        <thead style={{ backgroundColor: '#ECEFF1', border: '1px solid black' }}>
                          <th style={{ width: '25%' }}>H</th>
                          <th style={{ width: '25%' }}>T</th>
                          <th style={{ width: '25%' }}>K</th>
                          <th style={{ width: '25%' }}>P</th>
                        </thead>
                        {/* <tbody>
                        
                        </tbody> */}
                      </Table>
                    </td>
                </tr>
              </Table>
              <ButtonSecondary variant="solid">CETAK RESEP <FaPrint color='white'/></ButtonSecondary>
            </Modal.Body>
        </Modal>
  )
}

注意事项 #

• 确保使用React Bootstrap最新版本，旧版本可能存在样式优先级冲突。
• 可根据实际布局调整calc(100vh - 150px)中的数值，保证模态框头部和底部按钮始终处于可视区域。
• 若使用自定义CSS类替代内联样式，必要时添加!important强制覆盖Bootstrap默认样式。

内容的提问来源于stack exchange，提问作者github.arief