打印时仅让页脚显示在最后一页底部的实现问题

针对证书模板多页打印时页脚位置异常的问题，可通过打印专用CSS规则结合布局调整解决，以下是优化后的实现方案：

核心思路 #

1. 保留屏幕端的粘性页脚布局（Flex实现），确保单页显示正常
2. 针对打印场景，通过@page定义页面边距，调整页眉页脚定位，避免内容重叠，确保每页（含最后一页）的页脚固定在页面底部

优化后的代码 #

CSS 代码 #

/* 屏幕端布局：保持粘性页脚效果 */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

header {
  min-height: 50px;
  background: lightcyan;
}

footer {
  min-height: 50px;
  background: PapayaWhip;
}

article {
  flex: 1;
}

.h500 {
  height: 500px;
  border: 1px solid #DDD;
  margin: 2px;
}

/* 打印专用规则 */
@media print {
  body {
    min-height: auto; /* 取消屏幕端最小高度限制，让内容自然分页 */
    margin: 0;
  }

  /* 定义打印页面边距，为页眉页脚预留空间 */
  @page {
    margin: 70px 20px; /* 上下边距需大于页眉页脚高度，避免重叠 */
  }

  /* 页眉固定在打印页面顶部 */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* 页脚固定在打印页面底部 */
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* 避免正文被页眉页脚遮挡 */
  article {
    margin-top: 60px; /* 数值大于页眉高度 */
    margin-bottom: 60px; /* 数值大于页脚高度 */
  }
}

HTML 代码 #

<!DOCTYPE html>
<html>
<body>
  <header contentEditable>Header</header>
  <article contentEditable>
    <div class="h500">I made its height:500px to show it in 2 pages</div>
    <div class="h500">I made its height:500px to show it in 2 pages</div>
    <div class="h500">I made its height:500px to show it in 2 pages</div>
  </article>
  <footer contentEditable>Footer</footer>
</body>
</html>

关键说明 #

• @page规则用于设置打印页面的边距，确保页眉页脚有足够显示空间，不会与正文重叠
• 打印时取消body的min-height:100vh，让内容根据页面大小自动分页
• 使用position: fixed将页眉页脚固定在打印页面的顶部和底部，确保每页（包括最后一页）都能正确显示
• 给正文设置上下外边距，避免内容被固定的页眉页脚遮挡

内容的提问来源于stack exchange，提问作者alamnaryab