在所有页面上打印页眉/页脚（打印模式） [英] Print header/footer on all pages (Print Mode)

问题描述

<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

我要打印 #header code> #footer 在打印模式下的每个页面。我搜索了很多，但没有什么似乎工作，甚至位置：固定不工作按预期。

I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.

我真的很感激任何帮助。

I'd really appreciate any help.

谢谢！

推荐答案

如果您愿意转换到你的布局表格（不一定是理想的），你可以用< thead> 和< tfoot> 元素。他们将在每个页面的顶部和底部打印：

If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They'll print at the top and bottom of every page:

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

另一种选择是使用display table-header-group 和 table-footer-group ，但跨浏览器支持不是很好：

Another option is to use display table-header-group and table-footer-group but cross-browser support isn't great:

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

这篇关于在所有页面上打印页眉/页脚（打印模式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！