在最后一页的最底部打印 table 页脚

Question

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

一个 JS Fiddle: https://jsfiddle.net/j9k2xzze/

（右键单击输出窗格 -> 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>

但在最后一页上，table 页脚直接显示在文本下方。如果文本比最后一页短，页脚会固定在最后一页。

我喜欢页脚在最后一页的最底部。不幸的是，@page 扩展在 firefox 中不起作用，或者我做错了：

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

Answer 1

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

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

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

您可以在 pseudo-element to keep your HTML tidy, and you can use @media print 上放置边距以防止它显示在屏幕上。

这是代码。要在 Firefox 中查看它的工作情况，请打开 this jsfiddle，右键单击输出，select 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> 用作 spacer。不过，这种方法确实有一些小缺点（详情见代码段）。

这是代码。要在 Firefox 中查看它的工作情况，请打开 this jsfiddle，右键单击输出，select 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>

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

Answer 2

您好，我刚刚将以下媒体查询添加到您的 CSS。它 WORKS

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

检查以下内容fiddle

https://jsfiddle.net/jjsqgaza/

Answer 3

如果您使用绝对或固定位置，则无法只在最后一页显示页脚。如果仅当页面不够长时才希望页脚位于底部，请使用不需要 absolute/fixed 位置的粘性页脚技术。像这样

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

如果您确实需要在每页底部添加页脚，我建议您先生成 pdf 文件并打印出来。如果您需要打印复杂的东西，无论如何您最终都会先生成 pdf，打印 css 非常有限。

在最后一页的最底部打印 table 页脚

Print table footer at the very bottom on last page

html

css

firefox

html-table

print-css