html – 在最后一页的最底部打印表页脚

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

如果你只是支持Firefox，这其实很容易(跳到编辑看到一个在IE中也可以使用的技术，但是功能较少)。只需在内容的最后添加一个较大的底部边距。它必须足够大以保证在页面的末尾运行。浏览器假定您不想在文档末尾打印一个空白页面，因此它可以根据需要减少边距以避免这种情况，保持足够的距离将页脚推到页面的底部。

您可以将边距保留在pseudo-element以保持HTML整洁，您可以使用@media print防止在屏幕上显示。

这是代码。要查看它在Firefox中工作，请打开this jsfiddle，右键单击输出，选择此框架>仅显示此框架，并执行打印预览。

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

这种技术在任何浏览器中都不起作用，但Firefox。在IE中，当在垂直边距内发生分页时，整个边距被移除 – 这实际上是正确的行为according to the W3C(第13.3.3节) – 但不用担心，Firefox的行为是有效的，除非有一个在这种情况下，它实际上更好，所以我怀疑它会改变。

Chrome和其他Webkit浏览器(Safari，Opera)甚至不支持重复的页脚，因此它们是无关紧要的。我想我没有在Edge中测试过这种方法，但我很确定它不会奏效。

编辑

还有一个可以在Firefox和IE中使用的选项。所有你需要做的是将页脚放在一个单独的< div>并将其固定到页面的底部，然后使用重复的< tfoot>作为间隔物。这种方法确实有一些小的缺点，尽管(详细的下面的片段)。

这是代码。要查看它在Firefox中工作，请打开this jsfiddle，右键单击输出，选择此框架>仅显示此框架，并执行打印预览。在IE中，单击输出框，点击CTRL A，进行打印预览，并将“As Laid Out On Screen”更改为“As Selected On Screen”。

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

该方法的主要限制是在打印作业的每个页面上都放置一个相同的页脚，这意味着您不能有任何不同页脚或页脚的页面。另外，由于垫片的高度取决于页脚的高度，如果页脚高度发生变化，则必须进行调整。