如何让打印页面的rept-footer始终固定在页底？

云上老周

2026-7-8

核心思路

让每个<article>作为独立的页面容器，通过CSS布局逻辑（而非固定百分比margin）让rept-footer始终处于容器底部，同时配合打印媒体查询确保分页和位置稳定。

方案1：CSS Grid布局（推荐）

利用Grid的自动空间分配，让内容区占满剩余高度，footer自动固定在底部，日常显示和打印都适用：

/* 基础布局：每个article作为一页容器 */
article {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh; /* 日常视图占满整个视口高度 */
}

.rept-footer {
  grid-row: 2; /* 固定在Grid的第二行（底部） */
}

/* 打印专属样式 */
@media print {
  @page {
    size: A4; /* 根据需求设置纸张尺寸 */
    margin: 1cm; /* 统一设置页边距，避免内容被裁剪 */
  }

  article {
    min-height: calc(100vh - 2cm); /* 减去上下页边距，确保内容不超出页面 */
    page-break-after: always; /* 每个article单独分页 */
  }

  /* 防止图片撑破页面，自动缩放适配 */
  .content-wrap img {
    max-width: 100%;
    max-height: calc(100vh - 8cm); /* 预留header和footer的高度空间 */
    object-fit: contain;
  }
}

方案2：绝对定位方案

如果更习惯绝对定位，可以用相对定位的容器配合绝对定位的footer：

article {
  position: relative;
  min-height: 100vh; /* 日常视图占满视口 */
}

.rept-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 打印适配 */
@media print {
  @page {
    margin-bottom: 2cm; /* 给footer预留底部边距，避免被打印裁剪 */
  }

  .rept-footer {
    bottom: 1cm; /* 对应页边距，确保footer在打印区域内 */
  }

  article {
    page-break-after: always;
  }
}