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

Question

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

一个 JS 小提琴：https://jsfiddle.net/j9k2xzze/

（右键单击输出窗格->此框架->在新选项卡中打开框架。然后打印预览将正常工作）

<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> 作为分隔符。不过，这种方法确实有一些小缺点（详情如下 sn-p）。

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

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

Answer 2

如果您使用绝对位置或固定位置，则无法仅在最后一页使用页脚。如果只有在页面不够长的情况下才需要底部的页脚，请使用不需要绝对/固定位置的粘性页脚技术。像这样的

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

如果你真的需要每页底部的页脚，我建议先生成 pdf 并打印它。如果你需要打印复杂的东西，你最终还是会先生成 pdf，打印 css 是非常有限的。

Answer 3

您好，我刚刚在您的 CSS 中添加了以下媒体查询。 而且它有效

@media print {
 #footer {
    position: absolute;
    bottom: 0;
  }
}

检查以下小提琴

https://jsfiddle.net/jjsqgaza/