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

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

(右键单击输出窗格 – >此框架 – >在新选项卡中打开框架，然后打印预览将正常运行)

<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;
  }
}

解决方法

如果你只是支持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>

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

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

解决方法

猜你在找的HTML相关文章