纯HTML/CSS实现仅在最后打印页显示自定义页脚（无强制分页）

嘿，我完全懂你的困扰——之前用page伪类的方法虽然能给最后一页加页脚，但强制多出一页真的太浪费空间了，尤其是内容还是动态的，根本没法预判页数。别担心，这里有个纯HTML/CSS的解决方案，完全不会强制分页，还能精准把自定义页脚放在最后一页的底部：

第一步：搭建HTML结构 #

我们需要一个容器包裹内容和页脚，结构很简单：

<div class="print-container">
  <!-- 这里放你的所有动态内容 -->
  <div class="content">
    你的动态内容写在这里...
  </div>
  <!-- 最后一页专属页脚 -->
  <div class="last-footer">Rodapé</div>
</div>

第二步：编写核心CSS #

关键是利用绝对定位和容器的最小高度来让页脚自动“粘”在最后一页底部：

/* 基础样式：让容器至少占满一页高度 */
.print-container {
  position: relative;
  min-height: 100vh;
}

/* 给内容底部留足够空间，避免被页脚覆盖 */
.content {
  padding-bottom: 50px; /* 数值根据你的页脚高度调整 */
}

/* 默认状态下隐藏页脚，只在打印时显示 */
.last-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
}

/* 打印媒体查询：专门针对打印场景的样式 */
@media print {
  /* 打印时显示页脚 */
  .last-footer {
    display: block;
    /* 调整位置适配打印边距，Chrome默认打印边距约1cm */
    bottom: 1cm;
    font-size: 12px;
    padding: 0 1cm;
  }

  /* 允许内容在页面内自动分页，避免不必要的截断 */
  .content {
    page-break-inside: auto;
  }

  /* 禁止页脚单独占一页，确保它跟着最后一段内容走 */
  .last-footer {
    page-break-before: avoid;
  }
}

方案原理说明 #

• 容器设置min-height: 100vh，保证即使内容很少，容器也能占满一整页，页脚会乖乖留在当前页底部；
• 当内容超过一页时，容器会被内容自动撑开，页脚自然就被“推”到最后一页的底部；
• page-break-before: avoid规则确保页脚不会被单独分到新的一页，完美解决之前强制分页的问题。

一些实用注意事项 #

• 记得根据你实际的页脚高度调整content的padding-bottom值，避免内容被页脚遮挡；
• 不同浏览器的打印边距可能略有差异，你可以通过调整last-footer的bottom和padding值来适配；
• 测试时直接用Chrome的打印预览（快捷键Ctrl+P）查看效果，这样能快速调整样式直到符合预期。

内容来源于stack exchange