Html 有没有办法在每一页上打印网页页眉/页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1722437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to get a web page header/footer printed on every page?
提问by Carvell Fenton
Based on my research, it seems that what I want to do is not possible, but in case something has changed, I wanted to check to see if anyone had come up with a way to do this.
根据我的研究，我想做的事情似乎是不可能的，但如果发生了一些变化，我想看看是否有人想出了一种方法来做到这一点。
I have a web app that generates reports for print based on user selections in the browser window. I have a custom header and footer that, when the report is printed from the browser, should be repeated on every printed page. It is not the browser header and footer I need, but rather the custom ones that I generate. Also, I don't think this is an issue of CSS and media types, but I am not a CSS expert. I have no issues getting the header and footer to print once, but I can't get them to print on each page. I have read that perhaps if I recreated my report pages using tables, and then used table head tags and CSS, that may work at least to get the header on each page. I have not had success with this yet, but I will try it again if it is the only option. A coworker suggested that I count lines in my php and manually put out the header and footer as required. I guess that is an option, but it just seems like there should be a way to do this that isn't so "brute force"!
我有一个 Web 应用程序，它根据用户在浏览器窗口中的选择生成要打印的报告。我有一个自定义页眉和页脚，当从浏览器打印报告时，应该在每个打印页面上重复。我需要的不是浏览器页眉和页脚，而是我生成的自定义页眉和页脚。另外，我不认为这是 CSS 和媒体类型的问题，但我不是 CSS 专家。我没有问题让页眉和页脚打印一次，但我无法让它们在每一页上打印。我已经读过，也许如果我使用表格重新创建我的报告页面，然后使用表格标题标签和 CSS，那至少可以在每个页面上获取标题。我还没有成功，但如果这是唯一的选择，我会再试一次。一位同事建议我在我的 php 中计算行数，并根据需要手动放出页眉和页脚。我想这是一个选择，但似乎应该有一种方法来做到这一点，而不是那么“蛮力”！
The other caveat is that I have to support IE 6, so I suspect some of the CSS things I have tried are just not supported.
另一个警告是我必须支持 IE 6，所以我怀疑我尝试过的一些 CSS 东西不支持。
If anyone knows any way to do this, that would be great! If there isn't, I will have to rethink my approach.
如果有人知道任何方法可以做到这一点，那就太好了！如果没有，我将不得不重新考虑我的方法。
Thanks in advance!
提前致谢！
UPDATE (14 Dec 2011)
更新（2011 年 12 月 14 日）
I made considerable progress with this issue, and using some of the info from the answers, I did produce reports that were usable, but never as nice or as professional as I wanted. Footers would tend to be not close enough to the bottom of the page, I had to do a lot of guess work and "brittle" calculations about how big text was going to be to decide on inserting page breaks, I could only support a restricted set of page formats, and any changes to the reports resulted in a cascade of code changes and yet more brittle calculations. There was always a scenario that broke some part of some report. We revisted the requirements, and are now generating reports as PDFs using TCPDF. The documentation is a bit opaque, and it takes some experimentation, but the results are far superior and now the reports appear as they should. I would say to anyone trying to do HTML reports from the browser, unless they are very simple, save yourself the frustration (as others told me here) and go with PDFs or something similar.
我在这个问题上取得了相当大的进展，并且使用答案中的一些信息，我确实生成了可用的报告，但从来没有像我想要的那样好或专业。页脚往往离页面底部不够近，我不得不做很多猜测工作和“脆弱”的计算来决定插入分页符的文本有多大，我只能支持受限制的一组页面格式，以及对报告的任何更改都会导致一系列代码更改和更脆弱的计算。总有一个场景会破坏某些报告的某些部分。我们修改了要求，现在使用 TCPDF 生成 PDF 格式的报告. 文档有点不透明，需要进行一些实验，但结果要好得多，现在报告看起来应该如此。我会告诉任何试图从浏览器制作 HTML 报告的人，除非它们非常简单，否则请不要沮丧（正如其他人在这里告诉我的那样）并使用 PDF 或类似的东西。
采纳答案by Chris J
It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)
它可以用表格来完成——我知道我会通过建议使用表格进行布局来冒险投反对票——但我们在这里谈论的是 IE6，它并不以其出色的 CSS 支持而闻名:-)
If you set a CSS style as follows:
如果你设置一个 CSS 样式如下：
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
Then when you create your HTML, render your body as:
然后，当您创建 HTML 时，将您的正文呈现为：
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".
是的，它不好（表格与 CSS），它并不理想，但是（对您来说很重要）它确实适用于 IE6。我无法对 Firefox 发表评论，因为我没有在那里测试过它，但它应该可以完成这项工作。这也将处理不同大小的页面、不同的字体大小等，因此它应该“正常工作”。
If you want the header and footer to appear on printed media only, then use the @media parameters to do the right thing:
如果您希望页眉和页脚仅出现在印刷媒体上，请使用 @media 参数来做正确的事情：
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}
NoteAs of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:
注意截至 2015 年 7 月，这仍仅适用于 Firefox 和 IE。基于 Webkit 的浏览器（参见 Chrome、Safari）在他们的问题跟踪器中存在长期存在的错误，如果有人觉得有足够的力量对它们进行投票：
The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)
这个问题下面的评论告诉我这个问题现在已经在 Chrome 中解决了。我没有检查自己:-)
The original bugs against Chrome (for reference) are:
针对 Chrome 的原始错误（供参考）是：
回答by UpTheCreek
This will work in some browsers, not not all. I don't think there is an elegant cross-browser solution
这将适用于某些浏览器，而不是所有浏览器。我认为没有优雅的跨浏览器解决方案
Include the print footer/header you want in divs on the page (in this example div id='printableFooter')
在页面上的 div 中包含您想要的打印页脚/页眉（在本例中为 div id='printableFooter'）
In the screen css file put:
在屏幕 css 文件中放置：
#printableFooter {display: none;}
In the print css file:
在打印 css 文件中：
#printableFooter {display: block; position: fixed; bottom: 0;}
回答by Sachin Chourasiya
I would suggest to divide the page in table, and add the header part to first row and the footer part to the last row. The contents of the rows between the first and last rows can be changed dynamically so you will get the constant header and footer at desired pages.
我建议在表格中划分页面，并将页眉部分添加到第一行，将页脚部分添加到最后一行。第一行和最后一行之间的行内容可以动态更改，因此您将在所需页面上获得恒定的页眉和页脚。
----------
ROW1 HEADER
----------
ROW2
Insert dynamic contents here
ROW N-1
----------
ROW N Footer
回答by Horacio N. Hdez.
try to generate a (rtf | pdf) document for printing
尝试生成（rtf | pdf）文档进行打印
