MPDF内容Div高度仅首页生效，分页后无法铺满页面问题求助

问题描述 #

使用MPDF时，将内容div的height设为100%能让第一页内容撑满页头到页脚的区域，但内容过长自动分页后，后续页面的div无法延伸至页面底部。

问题原因 #

MPDF的分页机制中，第一页的height:100%是以页面的可用内容区域（页头、页脚与边距之间的空间）为参考，但分页生成的新页面中，内容容器的高度参考对象不再是整个页面可用区域，导致100%高度失效。

可行解决方案 #

方案1：计算固定最小高度 #

先算出页面的可用内容高度：A4纸总高297mm，减去页边距（top40mm、bottom20mm）和页头（30mm）、页脚（10mm）的高度，可得可用高度为297-40-20-30-10=197mm。将内容div的height:100%替换为min-height:197mm，这样内容不足时会撑满页面，内容过长时自动分页，后续页面的容器也会保持至少占满可用高度。

修改后的内容div代码：

<div id="content" style="background-color: orange; border:1px solid black; min-height: 197mm;">
  <!-- 原有内容 -->
</div>

方案2：改用表格布局 #

MPDF对表格的跨页布局支持更稳定，将内容放在表格单元格中，设置表格高度为100%，单元格会自动适配每页的可用空间：

替换原有的content div为以下代码：

<table style="width:100%; min-height:100%; border-collapse: collapse; margin: 0; padding: 0;">
  <tr>
    <td style="background-color: orange; border:1px solid black; padding: 0;">
      <!-- 所有内容段落放在这里 -->
      <p>1. Arsenal Football Club, established in 1886...</p>
      <!-- 其余内容 -->
    </td>
  </tr>
</table>

方案3：完善高度继承链 #

给html和body设置100%高度，确保内容容器的高度参考链完整，同时使用min-height替代height，配合MPDF的分页规则：

在<style>中添加：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#content {
  background-color: orange;
  border:1px solid black;
  min-height: 100%;
  page-break-inside: auto;
}

内容的提问来源于stack exchange，提问作者Bu Saeed