在所有页面上打印页眉/页脚(打印模式)

Question

<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和#footer对每个打印模式页.我搜索了很多,但似乎没有任何工作,甚至position:fixed没有按预期工作.

Answer 1

如果您愿意切换到布局的表格(不一定是理想的),您可以使用<thead>和<tfoot>元素来完成.它们将打印在每页的顶部和底部:

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

另一个选择是使用显示table-header-group,table-footer-group但跨浏览器支持不是很好:

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

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

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