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

Question

我正在使用表格在每个页面上创建页脚(在 Firefox 中工作，这就足够了)。

JS fiddle :https://jsfiddle.net/j9k2xzze/

(右键单击输出 Pane -> This Frame -> Open Frame in New Tab。然后 Print Preview 将正常运行)

<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 扩展在 firefox 中不起作用，或者我做错了:

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

Answer 1

如果您只支持 Firefox，这实际上非常简单。(跳至编辑以查看在 IE 中也适用但通用性较低的技术。Chrome 和其他 webkit 浏览器没有我发布此答案时不支持重复页脚，因此我没有对其进行测试)。

您所要做的就是在内容末尾添加较大的底部边距。确切的大小无关紧要，但它必须足够大以保证超过页面末尾。我建议它至少与您认为用户将使用的最大纸张尺寸一样大。

别担心，这不会在文档末尾添加空白页。边距不同于其他形式的空白(例如填充和 <br> 标签)，因为它们在超出页面边界时会被取消( see spec ，第 13.3.3 节)。 Firefox 和 IE 都会删除边距，但 Firefox 仍会在页面底部生成一个页脚，就好像发生了分页一样。 (另一方面，IE 的行为就好像边距从未存在过一样，这就是为什么这种方法在该浏览器中不起作用的原因。)

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

这是代码。要查看它在 Firefox 中的工作情况，请打开 this jsfiddle ，右键单击输出，选择 This Frame > Show Only This Frame，然后进行打印预览。

@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 中使用。您所要做的就是将页脚放在单独的 <div> 中。并将其固定到页面底部，然后使用重复<tfoot>作为垫片。不过，这种方法确实有一些小缺点(详情见代码片段)。

这是代码。要查看它在 Firefox 中的工作情况，请打开 this jsfiddle ，右键单击输出，选择 This Frame > Show Only This Frame，然后进行打印预览。在 IE 中，单击输出框架，按 CTRL+A，进行打印预览，然后将“按屏幕布局”更改为“按屏幕选择”。

@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>

此方法的主要限制是它在打印作业的每一页上都放置了相同的页脚，这意味着您不能有任何页面具有不同的页脚，或没有页脚。此外，由于分隔符的高度取决于页脚的高度，如果页脚高度发生变化，您必须调整它。