打印多页HTML时页脚图片未固定在最后一页底部的问题求助

各位大佬好，我最近碰到个挺闹心的问题：在打印多页HTML内容的时候，页脚的图片没法固定在最后一页的底部，其他页面的页脚都能乖乖贴在页面最底下，唯独最后一页的页脚会跟着内容走，不能固定到页面底部位置。

我目前是用CSS的@page规则配合position: fixed来实现页脚的，相关CSS代码大概是这样：

@media print {
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
  }
}

页面里的内容是通过JS动态生成的出院报告，内容长度不确定，可能一页也可能好几页，生成代码片段如下：

function generateDischargeReport() {
    // 获取所有表单元素
    const elements = {
        patientName: document.getElementById("DRD.V.R1.FULLNAME"),
        healthInfo: document.getElementById("DRD.V.R1.MEDICALHISTORY"),
        doctorName: document.getElementById("DRD.V.R1.DOCTOR_ID"),
        diagnosis: document.getElementById("DRD.V.R1.D"),
        physicalExam: document.getElementById("DRD.V.R1.P"),
        investigation: document.getElementById("DRD.V.R1.I")
        // 还有一些其他表单元素就不一一列举了
    };

    // 将表单内容填充到报告模板对应的位置
    document.getElementById("report-patient-name").textContent = elements.patientName.value;
    document.getElementById("report-health-info").textContent = elements.healthInfo.value;
    // 其他内容的填充逻辑类似
}

我试过调整打印样式的margin-bottom，也试过给内容区域加page-break-after控制分页，可最后一页的页脚还是没办法固定在底部。有没有哪位前辈遇到过类似的问题，能给我指点一下解决办法吗？

备注：内容来源于stack exchange，提问作者Ahmed Amin Shahin