以下是从我尚未发布的用于生成简历的项目中提取的一些技巧......
/* Thanks be to: https://stackoverflow.com/questions/19646835/print-repeating-page-headers-in-chrome/25880258#25880258
And may allow for repeated headers only in print preview
*/
div[class*="resume-section-experience-"] {
display: table;
width: 100%
}
div[class*="resume-section-experience-"] > div {
display: table-cell;
overflow: hidden;
}
/* Add further section repetition hiding here */
.resume-section-experience-professional ~ .resume-section-experience-professional > div:before {
content: "";
display: block;
margin-bottom: -3em; // inverse of header height
}
.resume-section-experience-volunteer ~ .resume-section-experience-volunteer > div:before {
content: "";
display: block;
margin-bottom: -3em; /* inverse of header height */
}
.resume-headings {
height: 3em;
}
div[class*="resume-section-experience-"] > div > div {
display: inline-block;
width: 100%;
vertical-align: top;
}
/**
* Attempt to keep section headings from displaying at the bottom of pages
* and discourage page brakes within various content blocks.
*/
@media print {
h2, h3, h4, ul, .professional-experience {
page-break-after: avoid;
}
pre, blockquote, ul, div[class*="-training"], div[class*="-requirements"], div[class*="-experience"], div[class*="-skills"], div[class*="resume-section-experience-"] {
page-break-inside: avoid;
}
}
...您必须调整目标元素名称/类，也许还需要调整段落之间的间距，但上面的代码可以满足类似的要求。
尽管如此，如果您知道页面之间的段落会在某个时刻被打破，那么最好缩小该容器的可用高度，以便为固定位置的页眉和页脚留出空间。
如果您编辑您的问题以包含一些标记（并通知我），我将尝试再次编辑此答案，以更好地解决您的特定用例。
关于上述 CSS 的附加注释；对于我的用例，我发现重复页眉/页脚数据，然后在不在页面顶部/底部时有选择地隐藏它们，更容易在 Web 和打印视图之间进行格式化。
@dhiraj
...主要问题是如何生成页码
If page numbers be the main concern then it should be possible to utilize display: table, display: table-footer-group, and
print.css
/**
* print modifications **must** be within a style sheet
*/
@media print {
/*
* Note, forced page breaks are only for testing when content is insufficient
*/
.page_content__print_break {
page-break-after: always;
break-after: always;
}
footer.footer_content {
visibility: show;
opacity: 1;
filter: alpha(opacity=100);
position: fixed;
bottom: 0;
}
footer.footer_content::after {
counter-increment: page_number;
content: "Page:" counter(page_number);
}
}
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Table based CSS footer example</title>
<style media="screen">
footer.footer_content,
.page_content__print_break {
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<link rel="stylesheet" href="print.css">
</head>
<body>
<section class="page_content">
<div class="page_content__row">
<p>This is where page content should be placed</p>
<p>
Thanks be to:
<a href="https://stackoverflow.com/questions/20050939">
Print page numbers on pages when printing html
</a>
</p>
</div>
<!--
Note, following element is only for this example and should
be removed for the use-case of this posted quesiton.
-->
<div class="page_content__print_break"></div>
<div class="page_content__row">
<p>
More example content to perhaps force a second page to be printed...
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>
<footer class="footer_content" role="contentinfo"></footer>
</body>
</html>
旁注，在查看上面的内部链接的问答后，我发现@page您在当前问题中使用的功能可能不受 CSS 完全支持，以获得更多信息幻想需要PagedJS https://www.pagedjs.org/
也许还可以查看官方 CSS 文档以了解支持的内容@page https://www.w3.org/TR/CSS2/page.html特征。
...然而，经过一些测试后，浏览器支持似乎近年来发生了变化； Firefox 和 Chrome 似乎都没有counter打印时的东西，以及page-break-*已更改为break-*尽管现在两个浏览器似乎都忽略了该属性:-|
编辑;评论者@contm https://stackoverflow.com/a/20050986/2632107指出链接样式表与内部样式head元素可能会产生不同的结果 X-\
事实上回顾之后Mozilla 的开发者文档break-after https://developer.mozilla.org/en-US/docs/Web/CSS/break-after兼容性图表，此功能由 Internet Exporter 支持
如果我发现任何可以解决这些问题的东西，我一定会再次出现并对此答案进行另一次编辑。
Updates;
根据 CSS 规范。为了@page https://drafts.csswg.org/css-page-3/#at-page-rule目前它还是一个 WIP（草案或进行中的工作），因此截至 2020 年，预计没有供应商能够实施。
页脚是fixed而不是重复，仅在所有增量完成后计算一次；一个会报告的例子Page: 2在每一页上，因为有两个page_content__rows...
print.css
@media print {
:root {
counter-reset: page_count;
}
.page_content__row {
counter-increment: page_count;
}
.page_content__print_break {
page-break-after: always;
break-after: always;
}
footer.footer_content {
visibility: show;
opacity: 1;
filter: alpha(opacity=100);
position: fixed;
bottom: 0;
}
footer.footer_content::after {
content: "Page: " counter(page_count);
}
}
...除了第三方库之外，我能想到的用于自定义页脚信息的唯一其他选项是在动态生成内容时计算分页符，然后注射需要时的页脚元素。当然，这有一个巨大的缺点，因为客户端字体/缩放设置要么会弄乱页脚自定义，要么必须被忽略，如果你走这条路，那么在服务器端生成 PDF 文档并提供可能会更简单下载链接。
