如何用HTML/CSS为打印的每一页添加自定义页眉页脚？

能否为HTML页面的每一页打印自定义页眉页脚？我希望在每一页的顶部和底部添加红色、Arial字体、16pt大小的"UNCLASSIFIED"文本，无论页面内容如何。需要说明的是，如果文档打印为5页，每一页都应显示该自定义页眉页脚。请问能否通过HTML/CSS实现该需求？

可以通过CSS的@media print媒体查询结合固定定位实现，以下是适配你需求的完整代码：

HTML代码 #

<header>
  <div>UNCLASSIFIED</div>
</header>
<main>
  <!-- 页面主内容，示例用重复列表项模拟长内容 -->
  <ol>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
    <li>这是页面的主内容。</li>
  </ol>
</main>
<footer>
  <div>UNCLASSIFIED</div>
</footer>

CSS代码 #

/* 屏幕显示时隐藏页眉页脚，可根据需求调整 */
header, footer {
  display: none;
}

@media print {
  /* 设置打印页面边距，为页眉页脚预留空间 */
  @page {
    margin: 80px 20px;
  }

  body {
    font-family: Arial, sans-serif;
  }

  /* 打印时显示并固定页眉页脚 */
  header, footer {
    display: block;
    position: fixed;
    width: 100%;
    color: red;
    font-size: 16pt;
    text-align: center;
  }

  header {
    top: 0; /* 固定在打印页顶部 */
  }

  footer {
    bottom: 0; /* 固定在打印页底部 */
  }

  /* 确保主内容不被页眉页脚遮挡 */
  main {
    margin: 0 auto;
    max-width: 100%;
  }
}

核心要点 #

• @media print：仅在打印场景下应用样式，不影响屏幕显示
• position: fixed：让页眉页脚固定在页面的顶部和底部，实现每页重复显示
• @page margin：调整打印页面的边距，避免主内容与页眉页脚重叠
• 直接指定字体样式：Arial字体、16pt大小、红色文本，完全匹配需求

内容的提问来源于stack exchange，提问作者Đinh Quyết SolidWorks