在处理Web打印需求时，我们经常会遇到一个棘手的挑战：如何确保页眉和页眉能够像传统Word文档那样，自动出现在打印输出的每一页上？屏幕上的浏览器并不天然支持页面分割的概念，这使得“每页重复显示”变得异常困难。在本文中，我们将深入探讨这一技术难题，并利用CSS的强大功能来实现专业的打印排版。你将学到如何使用 INLINECODE48a77d83 和 INLINECODEc05f2010 规则，以及如何处理打印时的边距、内容重叠和分页行为，让你的网页在转为纸质文档时依然保持清晰、专业。
为什么打印样式如此特殊？
首先，我们需要理解屏幕显示和打印输出是两个完全不同的渲染环境。在屏幕上，我们面对的是一个连续的滚动视口；而在打印时，浏览器必须将连续的流内容切割成离散的页面。如果不进行干预，浏览器通常会简单地将内容截断，导致图表被切成两半，或者页眉只出现在第一页的顶部，后续页面完全丢失。
为了解决这个问题，我们需要使用 CSS 的 媒体查询。通过将样式封装在 @media print 块中，我们可以专门针对打印机定义一套样式规则，而不影响屏幕上的显示效果。
核心策略一：使用 position: fixed 固定元素
最直观的方法是将页眉和页脚从文档流中脱离出来，并固定在打印页面的特定位置。这种方法模拟了绝对定位的行为，使其“漂浮”在所有内容的上方。
#### 原理分析
当我们将一个元素设置为 position: fixed 时，在打印上下文中，它会被放置在每一页的同一位置。这与浏览器视口中的固定定位类似，只不过参考系变成了“每一页”。
#### 示例 1：基础的固定定位实现
让我们通过一个简单的例子来看看如何实现这一点。我们将创建一个包含页眉、正文和页脚的页面，并确保页眉和页脚在每一页都可见。
打印页眉页脚示例 1
/* 屏幕显示样式：为了让页面在浏览器中看起来也正常 */
body {
font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
border-bottom: 1px solid #ddd;
}
footer {
background-color: #f4f4f4;
padding: 10px;
text-align: center;
border-top: 1px solid #ddd;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
/* 打印专用样式：核心魔法发生在这里 */
@media print {
/* 隐藏不需要打印的元素（如果有的话） */
.no-print {
display: none;
}
/* 固定页眉在每页顶部 */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* 设置固定高度，防止塌陷 */
border-bottom: 2px solid #000; /* 打印时使用深色边框更清晰 */
}
/* 固定页脚在每页底部 */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
border-top: 1px solid #000;
}
/* 关键点：为正文添加顶部和底部的内边距 */
/* 这样正文内容就不会被固定的页眉和页脚遮挡 */
main {
margin-top: 60px; /* 必须大于 header 的高度 */
margin-bottom: 40px; /* 必须大于 footer 的高度 */
}
}
请在打印预览中观察页眉和页脚的效果
公司机密文档 - 页眉
主要内容区域
这是一段测试文本。为了演示分页效果，我们需要大量的内容来填充页面。
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
// 简单的脚本用于生成大量内容，模拟长文档
for(let i=0; i<30; i++) {
document.write('这是第 ‘ + (i+1) + ‘ 段重复内容。请注意观察页眉是否在每一页顶部出现，以及页脚是否在每一页底部出现。如果你看到内容被遮挡，说明 margin 设置不当。
‘);
}
#### 代码深度解析
在这个例子中，我们做了一些关键的调整，以确保打印效果完美：
- INLINECODEa76ee10a: 我们将 INLINECODE641e6fa5 和 INLINECODEe5a3efda 都设置为了 INLINECODE78fb34b5。对于 INLINECODEf34fdcf9，INLINECODE5c1168d0 确保它贴在每一页的最顶端。对于 INLINECODEcbd117bb，INLINECODE9151326f 确保它贴在每一页的最底端。
- 内容避让: 这是一个很多开发者容易忽略的细节。因为固定定位的元素脱离了文档流，如果不给 INLINECODEd0cdbcc5 标签添加 INLINECODEd6562fef 和 INLINECODE980e65a4，正文的第一行文字会被页眉盖住，最后一行会被页脚盖住。我们在 CSS 中为 INLINECODE84f52ba8 设置了
margin-top: 60px，这比 header 的 50px 稍大，留出了一些视觉上的呼吸空间。
核心策略二：使用 @page 规则控制纸张边距
虽然 INLINECODEcd7c7465 很强大，但有时候我们需要更精细的控制，特别是关于页面边距的处理。浏览器默认会给打印页面添加边距，这可能会导致我们的布局错位。我们可以使用 CSS 的 INLINECODE855f78c7 规则来统一管理这些设置。
#### 什么是 @page？
@page 规则专门用于修改打印页面的属性，比如尺寸、方向和边距。最常用的场景是清除或重置浏览器默认的页边距，以便我们自己掌控页眉和页脚的位置。
#### 示例 2：结合 @page 和伪元素打印标题
在这个进阶示例中，我们将展示一种更现代、更灵活的方法。我们将利用 CSS 的 INLINECODEe486de3e（计数器）功能来实现自动页码，并利用伪元素 INLINECODE2880a6c3 来动态插入打印时才显示的文本。这种方法可以保持 HTML 的语义化，同时在打印时自动添加装饰性内容。
高级打印样式示例
body {
font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;
color: #333;
background-color: #fafafa;
}
.container {
max-width: 800px;
margin: 40px auto;
background: white;
padding: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 { color: #2c3e50; }
p { margin-bottom: 15px; text-align: justify; }
/* 打印样式开始 */
@media print {
/* 1. 重置页面边距，消除浏览器默认的页眉页脚（如URL、日期） */
@page {
size: A4; /* 指定纸张大小 */
margin: 20mm; /* 设置页边距，为我们的自定义页眉页脚留出空间 */
}
/* 2. 屏幕背景色去除，节省墨粉 */
body {
background: none;
}
.container {
box-shadow: none;
margin: 0;
width: 100%;
padding: 0;
}
/* 3. 使用绝对定位实现打印页眉 */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 30mm; /* 与@page的margin-top配合 */
border-bottom: 2pt solid #333;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10mm;
}
/* 4. 使用绝对定位实现打印页脚 */
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 15mm; /* 与@page的margin-bottom配合 */
border-top: 1pt solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 10pt;
color: #555;
}
/* 5. 防止内容在页眉页脚下被切断或遮挡 */
/* 增加内边距以将内容推入安全区域 */
.content-wrapper {
margin-top: 35mm; /* 留出页眉高度 + 一些间距 */
margin-bottom: 20mm; /* 留出页脚高度 + 一些间距 */
}
/* 打印时的一些辅助类 */
.screen-only { display: none !important; }
}
高级技术文档
机密级别：内部
CSS 打印布局深度解析
在Web开发的早期，打印页面往往是一项令人沮丧的任务。浏览器会随意截断表格、图片，以及忽略我们在屏幕上精心设计的布局。然而，随着CSS打印标准的完善，我们现在拥有了极其强大的工具来控制输出。
本文档旨在演示如何通过 CSS 创建一个多页打印文档，确保每一页都包含清晰的页眉和页脚。请注意观察打印预览中的效果。
// 填充内容以产生多个打印页
const contentDiv = document.getElementById(‘long-content‘);
let text = "为了展示分页效果，这里填充了大量的占位文本。";
for (let i = 0; i < 50; i++) {
text += " 在实际项目中，你应该确保表格行不被分页截断（可以使用 break-inside: avoid）。此外，图片也需要处理得当。";
}
text += "
";
contentDiv.innerHTML = text;
进阶技巧：处理动态内容与表格
在打印复杂的报表时，我们还需要关注以下两个常见问题：表格分页截断和元素内的分页控制。
#### 避免表格截断
没有什么比一个表格被切成两半（一半在上一页，另一半在下一页）更糟糕的了。我们可以通过以下 CSS 属性来避免这种情况：
@media print {
table {
break-inside: avoid; /* 这是一个简写属性 */
/* 或者分别写 */
page-break-inside: avoid; /* 旧标准兼容性更好 */
}
}
#### 控制标题与内容的分离
有时候，我们希望一个
标题和它随后的段落必须出现在同一页，而不是标题在第一页底部，文字在第二页顶部。这时可以使用：
@media print {
h2 {
break-after: avoid; /* 避免在元素后立即分页 */
page-break-after: avoid;
}
}
常见错误与解决方案
@media print {
h2 {
break-after: avoid; /* 避免在元素后立即分页 */
page-break-after: avoid;
}
}
在实际开发中，你可能会遇到以下坑点：
- 背景色不打印：默认情况下，浏览器为了节省墨水，不会打印
background-color。如果你需要打印背景色，必须在打印样式中显式设置：
@media print {
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
- 边距计算错误：INLINECODE44b7ef2f 的 INLINECODEaa657e66 和你固定定位元素的 INLINECODE68c5452a 位置是叠加计算的。如果 INLINECODE73e2f206 设置了 INLINECODE7a4c0e99，那么你的 INLINECODE97404f64 元素的
top: 0实际上是在纸张边缘向内 2cm 的地方。理解这一点对于对齐至关重要。
- 链接失效：在纸上，链接是无法点击的。优秀的做法是打印出链接的 URL：
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
总结与最佳实践
通过这篇文章，我们探讨了两种主要的在打印页面中实现固定页眉和页脚的方法。虽然 INLINECODEbe70098a 是最直接的手段，但结合 INLINECODEf2f11551 规则的使用，能够让我们构建出更加稳固、可预测的打印布局。
关键要点回顾：
- 始终使用
@media print将打印样式与屏幕样式隔离。 - 使用
position: fixed将页眉页脚固定在每一页的指定位置。 - 切记为正文内容添加足够的 INLINECODEac3b2bf5 或 INLINECODEeed06af1，以防止被固定的页眉页脚遮挡。
- 利用
break-inside: avoid保护表格和图片不被分页截断。 - 开启
print-color-adjust: exact如果你需要保留背景色。
打印样式往往被前端开发者忽视，但它在企业级应用、电子发票、简历生成等场景中至关重要。掌握了这些技术，你就能为用户提供从屏幕到纸张的无缝体验。下次当你接到打印需求时，不妨试试这些方法，打造出一份令人印象深刻的纸质文档吧！