有没有办法让网页页眉/页脚印在每一页上?

根据我的研究,似乎我想要做的事情是不可能的,但是如果有什么变化的话,我想查看是否有人想出办法做到这一点。

我有一个networking应用程序,可以根据浏览器窗口中的用户select生成打印报告。 我有一个自定义页眉和页脚,当从浏览器打印报告时,应该在每个打印页面上重复。 这不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚。 另外,我不认为这是一个CSS和媒体types的问题,但我不是一个CSS专家。 我没有问题得到页眉和页脚打印一次,但我不能让他们打印在每一页上。 我读过,也许如果我使用表重新创build我的报告页面,然后使用表头标签和CSS,至less可以在每个页面上获取标题。 我还没有成功,但如果它是唯一的select,我会再试一次。 一位同事build议我在我的php中计算行数,并根据需要手动输出页眉和页脚。 我想这是一个选项,但它似乎应该有办法做到这一点,不是那么“蛮力”!

另一个警告是,我必须支持IE 6,所以我怀疑一些我尝试的CSS的东西只是不被支持。

如果有人知道有什么办法做到这一点,那就太棒了! 如果没有,我将不得不重新思考我的方法。

提前致谢!

更新(2011年12月14日)

我在这个问题上取得了相当大的进展,利用答案中的一些信息,我产生了可用的报告,但从来没有像我想要的那么好或专业。 页脚往往不够接近页面的底部,我不得不做大量的猜测工作和“脆弱”的计算,以确定如何插入分页符的大文本,我只能支持限制页面格式设置,以及对报告所做的任何更改都会导致代码更改的级联和更脆弱的计算。 总有一种情况打破了某些报告的某些部分。 我们修改了这些要求, 现在正在使用TCPDF生成PDF格式的报告 。 这个文档有点不透明,需要一些实验,但是结果要好得多,而且现在的报告看起来应该是这样。 我会对任何试图从浏览器进行HTML报告的人说,除非它们非常简单,不用担心(像其他人告诉我的那样),并使用PDF或类似的东西。

这可以用表格来完成 – 我知道我会冒险通过build议使用表格进行布局 – 但是我们在这里谈论IE6,这是不为其奇妙的CSS支持而闻名:-)

如果你设置一个CSS样式如下:

thead { display: table-header-group; } tfoot { display: table-footer-group; } 

然后,当你创build你的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> 

是的,这不是很好(表vs CSS),这不是理想的,但(对你来说很重要)它在IE6上工作。 我不能评论Firefox,因为我没有在那里testing,但它应该做的工作。 这也将处理不同大小的页面,不同的字体大小等,所以它应该“只是工作”。

如果您希望页眉和页脚仅出现在印刷介质上,请使用@media参数来做正确的事情:

 @media print { thead { display: table-header-group; } tfoot { display: table-footer-group; } } @media screen { thead { display: none; } tfoot { display: none; } } 

注意
截至2015年7月,这仍然只能在Firefox和IE中工作。 基于Webkit的浏览器(比如Chrome,Safari)在他们的问题跟踪器中存在着长期存在的漏洞,如果有人感到足够强大,可以对其投票:

我build议将表中的页面分开,并将标题部分添加到第一行,将页脚部分添加到最后一行。 第一行和最后一行之间的行内容可以dynamic更改,以便在所需的页面上获得常量页眉和页脚。

 ---------- ROW1 HEADER ---------- ROW2 Insert dynamic contents here ROW N-1 ---------- ROW N Footer 

尝试生成一个用于打印的(rtf | pdf)文档

这将在一些浏览器中工作,而不是全部。 我不认为有一个优雅的跨浏览器解决scheme

在页面中包含你想要的div打印页脚(在这个例子中div id ='printableFooter')

在屏幕上的css文件把:

 #printableFooter {display: none;} 

在打印的css文件中:

 #printableFooter {display: block; position: fixed; bottom: 0;}