FlyingSaucer PDF生成器内容主体与页脚重叠问题求助

我在使用FlyingSaucer将HTML转为PDF时，遇到内容主体和页脚重叠的问题，寻求有效的解决办法。

背景信息 #

主HTML结构片段 #

{{table}}

<div class="disclaimer-section">
    <ul>
        {{disclaimer}}
    </ul>
</div>

{{footer}}

主CSS #

* {
    font-family: "Microsoft JhengHei";
}

body {
    font-size: 10px;
    margin: 0px 0px;
    color: #333;
    line-height: 1.4;
    padding-bottom: 60mm;
}
{{table}}

.disclaimer-section {
    margin-top: 12px;
    font-size: 8pt;
    color: #333;
    line-height: 1.5;
}

.disclaimer-section .disclaimer-title {
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 8pt;
}

.disclaimer-section ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    font-size: 8pt;
}

.disclaimer-section li {
    margin: 0 0 4px 0;
    display: table;
    width: 100%;
    table-layout: fixed;
    font-size: 8pt;
}

.disclaimer-section li span:first-child {
    display: table-cell;
    width: 15px;
    text-align: right;
    vertical-align: top;
    padding-right: 3px;
    font-size: 8pt;
}

.disclaimer-section li span:last-child {
    display: table-cell;
    width: auto;
    vertical-align: top;
    font-size: 8pt;
}

表格部分（内容主体）和页脚有独立的HTML与CSS：

表格HTML #

<table class="projection-table">
    <thead>
    <tr>
        <td>{{B1Header}}</td>
        <td>{{A1Header}}</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>{{B1}}</td>
        <td>{{A1}}</td>
    </tr>

    </tbody>
</table>

表格CSS #

* {
    font-family: "Microsoft JhengHei";
    font-size: 10pt;
}
body {
    margin: 0px 0px;
    color: #333;
    line-height: 1.4;
}
table.projection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
}
table.projection-table th {
    padding: 6px 4px;
    font-weight: 700;
    font-size: 8pt;
    text-align: right;
}
table.projection-table td {
    padding: 5px 4px;
    text-align: right;
    font-size: 8pt;
}

页脚HTML #

<div class="footer">
    <p class="footer-remark">{{footerRemark}}</p>
    <hr class="divider" />
    <table class="footer-table">
        <tbody>
        <tr class="footer-row">
            <td class="footer-left page-counter"></td>
            <td class="footer-right">
                <table class="footer-right-table">
                    <tbody>
                    <tr>
                        <td class="text-right">abcd</td>
                        <td class="text-right">
                            egfddd
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>

页脚CSS #

.footer-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Microsoft JhengHei";
}
.footer-row {
  font-size: 8pt;
  border-collapse: collapse;
}
.footer-right {
  vertical-align: top;
  width: 50%;
  font-size: 8pt;
}
.footer-right-table {
  width: 100%;
  border-collapse: collapse;
}
.text-right {
  text-align: right;
  font-size: 8pt;
}
.page-counter {
  text-align: left;
  font-size: 8pt;
}
.page-counter::before {
  content: counter(page) " / " counter(pages);
}
.footer-remark {
  vertical-align: bottom;
  text-align: left;
  font-size: 8pt;
  margin-bottom: 4px;
}
.divider {
  border: 0.5mm;
  border-top: 0.5mm solid #49648c;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 8pt;
  background-color: transparent;
}
@media print {
  .footer {
    position: fixed;
    bottom: 0;
  }
  body {
    margin-bottom: 40px;
  }
}

生成PDF后内容主体与页脚出现重叠。

已尝试的解决方案 #

• 给表格的body添加margin-bottom/padding-bottom：无效，仅在重叠区域后增加空白
• 给表格CSS添加page-break-inside: avoid：无效
• 移除页脚的fixed定位：导致页脚仅在最后一页显示，不符合每页都显示页脚的需求

现寻求有效的解决方案。

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