是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
@Daniel在2012年对缺乏CSS3特性支持的问题做了一个评论:顶部中心和底部中心。
好吧，在Chrome 73+，下面的片段工作，其中页眉和页脚是<header></header>和<footer></footer>元素定义在页面内。
@page {
@top-center { content: element(header) }
}
@page {
@bottom-center { content: element(footer) }
}
其他回答
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷，使它们不能成为理想的通解。
如果你可以使用javascipt，让客户端处理使用javascript布局内容，根据可用空间放置元素。
你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容，并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
参见例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在操作系统中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。
我找到了一个解决这个问题的方法:
当你用“page”className分隔每一页时，你可以给“page”这个样式:
.page{
height: 1150px;
page-break-after: always;
overflow: hidden;
}
检查打印页面的预览，确保所有内容都在页面内，否则移动内容，让所有内容看起来都很整齐。
使用换行符来定义CSS中的样式:
@media all
{
#page-one, .footer, .page-break { display:none; }
}
@media print
{
#page-one, .footer, .page-break
{
display: block;
color:red;
font-family:Arial;
font-size: 16px;
text-transform: uppercase;
}
.page-break
{
page-break-before:always;
}
}
然后在文档中适当的位置添加标记:
<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
参考文献
CSS分页媒体:分页符 MDN: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式，如分页后? 打印大型HTML表时如何处理换页
最好的解决方案来自biskrem muhammad。
但它的答案有一个小问题。当页数大于1时，页脚不在最后一页的页脚。
将这个小CSS添加到由footer-info折叠的元素中
position: fixed;
bottom: 0;
