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

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的技术,但功能较少).只需在内容末尾添加较大的底部边距即可.它必须足够大,以确保在页面末尾运行.浏览器假定您不希望在文档末尾打印空白页面,因此它会尽可能地缩小边距以避免它,保持足够的页脚以将页脚推到页面底部.

您可以将边距放在伪元素上以保持HTML整洁,并且可以<br>用来阻止它在屏幕上显示.

这是代码.要在Firefox中查看它,请打开此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中,当在一个垂直边缘内发生分页时,整个边距被删除 - 这实际上是根据W3C(第13.3.3节)的正确行为- 但不要担心,Firefox的行为实际上是相同的,除了当有一个桌面页脚,在这种情况下它实际上更好,所以我怀疑它会永远改变.

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

编辑

还有另一种选择适用于Firefox和IE.您所要做的就是将页脚放在一个单独的位置@media print并将其固定到页面底部,然后使用重复<div>作为间隔符.这种方法确实有一些小缺点(详见下面的代码段).

这是代码.要在Firefox中查看它,请打开此jsfiddle,右键单击输出,选择"此帧">"仅显示此帧",然后执行打印预览.在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>

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