打印时如何仅在最后一页底部添加Footer（页脚）？

针对你遇到的“页脚无法仅在打印最后一页底部显示”的问题，以下是两种可靠的实现方案：

方法一：适配复杂HTML结构的绝对定位方案 #

适合页脚包含图片、复杂布局的场景，核心是利用打印媒体查询配合绝对定位，确保页脚仅出现在最后一页底部。

调整后的HTML结构 #

将所有内容包裹在一个容器中，页脚放在内容容器外：

<div class="content-wrapper">
  <!-- 此处放置你的所有页面内容 -->
</div>
<div class="footer grid h-16 grid-cols-2 content-center items-center justify-center bg-black">
  <div class="col-span-1 col-start-2 text-white">
    Bla bla footer here
  </div>
  <img class="col-start-3 pl-20" src={logoIcon} alt="logo_icon" />
</div>

打印专用CSS样式 #

@media print {
  /* 重置body基础样式，为定位提供基础 */
  body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 64px; /* 值等于页脚高度（h-16对应4rem=64px），防止内容被页脚覆盖 */
  }

  /* 确保内容容器不会被页脚截断 */
  .content-wrapper {
    margin-bottom: 64px;
  }

  /* 页脚核心样式 */
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 10pt;
    page-break-inside: avoid; /* 禁止页脚被分页拆分 */
  }
}

方法二：纯文本/简单元素的@page伪元素方案 #

如果页脚仅包含文本或简单图片，可直接使用CSS页面伪元素，无需额外调整HTML结构：

@media print {
  @page:last {
    /* 页脚文本区域 */
    @bottom-center {
      content: "Bla bla footer here";
      color: white;
      background-color: black;
      width: 100%;
      padding: 16px 0;
      font-size: 10pt;
      text-align: center;
    }
    /* 页脚logo区域 */
    @bottom-right {
      content: url('logo-icon.png');
      padding-right: 20px;
      align-self: center;
    }
  }
}

关键注意事项 #

• 所有打印专属样式必须放在@media print媒体查询内，否则不会在打印时生效。
• 避免使用position: sticky，该属性会让元素在每一页固定显示，不符合需求。
• 若使用方法一，需确保body的padding-bottom和内容容器的margin-bottom值与页脚高度一致，防止内容被覆盖。

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