如何用CSS/JS实现打印时将HTML区块置于最后一页底部？

问题分析 #

当前使用position: fixed的页脚会在每一页打印时都显示在底部，但需求是仅让.bottom-on-last-page元素出现在最后一页的底部。

解决方案 #

通过结合CSS打印媒体查询、绝对定位以及内容容器的最小高度设置，实现目标效果：

1. 调整HTML结构 #

给内容和底部元素添加父容器，便于布局控制：

<div class="print-container">
  <div id="content">
    <h1>Your content here</h1>
    <p>A lot of "Lorem".</p>
    <!-- 填充足够内容以生成多页打印效果 -->
  </div>
  <div class="bottom-on-last-page"><b>bottom-on-last-page</b></div>
</div>

2. 编写CSS样式 #

核心思路：让父容器作为定位基准，通过打印媒体查询控制底部元素仅在最后一页显示并固定在页底：

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

.bottom-on-last-page {
  display: none; /* 默认隐藏 */
}

/* 打印专属样式 */
@media print {
  /* 重置页面边距，避免默认样式干扰 */
  @page {
    margin: 2cm;
  }

  body {
    margin: 0;
  }

  .print-container {
    min-height: calc(100vh - 4cm); /* 减去页面上下边距，适配打印页尺寸 */
    page-break-inside: avoid; /* 避免容器被拆分到多页 */
  }

  .bottom-on-last-page {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

补充说明 #

如果内容高度刚好占满整页，上述设置可确保底部元素落在最后一页底部。若内容刚好卡在某一页末尾，可微调min-height值或添加空占位元素适配不同打印页面尺寸，部分浏览器对打印样式支持有差异，建议在目标浏览器中测试调整。

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