如何在不重复打印 N 页的情况下制作页眉和页脚？答案

【问题标题】：How to make the header and footer without repeating in print for N pages?如何在不重复打印 N 页的情况下制作页眉和页脚？
【发布时间】：2016-08-25 16:57:15
【问题描述】：

我正在努力在每个打印页面上重复页眉和页脚。没问题一定是一张桌子，最喜欢的是，有人知道该怎么做吗？而且我不知道它会有多少页，可以是n页。

试试：jsfiddle.net/7ZGVv/111

【问题讨论】：

你能贴一些代码吗？
我没有发现代码可以做到这一点，我越看越接近：jsfiddle.net/7ZGVv/111。但是不能重复页眉和页脚。
How to use HTML to print header and footer on every printed page of a document with 5 pages?的可能重复
@AdamBuchananSmith 不一样。
@Danilo 请参阅下面的工作示例。

标签： javascript jquery css html printing

【解决方案1】：

好吧，因为似乎没有人认为这是一个 dup，所以我将在此处发布代码以证明这一点。在此处查看工作示例http://a-b-smith.com/

html

<h1>test 1</h1>
<h1>test 2</h1>
<h1>test 3</h1>
<h1>test 4</h1>
<h1>test 5</h1>
<h1>test 6</h1>
<div class="divFooter">
<h1>Footer</h1>
</div>
<div class="divHeader">
<h1>Header</h1>
</div>

CSS 注意我在每个<h1> 之间添加了一个分页符来模拟多个页面

@media print {
  h1 {
    page-break-after: always;
  }
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
  div.divHeader {
    position: fixed;
    top: 0;
  }
  body > h1 {margin-top: 100px;}
}

@media screen {
  div.divFooter, div.divHeader {
    display: none;
  }
}

【讨论】：

【解决方案2】：

HTML 和 CSS 不支持在打印中打印页眉和页脚。您可以通过以下方式对其进行模拟：

表格
固定位置块

此解决方案在不同的浏览器中存在每个错误和警告。

见：How to use HTML to print header and footer on every printed page of a document?

【讨论】：