如何设置页脚仅固定在window.print()打印文档的最后一页底部

问题根因 #

• 你设置position: absolute失效核心原因是给html和body写死了height: 100%，导致父容器高度被限制为单页高度，页脚只会定位在第一页底部
• @page的margin-bottom缺少单位，实际打印时边距规则失效
• body没有设置相对定位，absolute定位找不到父级基准，会基于视口定位而不是整个文档流

修复方案 #

直接替换你原有打印CSS即可，HTML无需调整：

@media print {
  html,
  body {
    overflow: visible;
    /* 取消固定高度，让容器高度随内容总长度自适应 */
    height: auto;
    min-height: 100%;
    /* 设为相对定位，作为footer的定位基准 */
    position: relative;
    /* 预留顶部固定header的高度，避免内容被遮挡 */
    padding-top: 320px;
    /* 预留底部页脚高度，避免内容和页脚重叠，数值和footer高度保持一致 */
    padding-bottom: 80px;
    box-sizing: border-box;
  }
  @page {
    size: A4;
    margin-left: 0;
    margin-right: 0;
    /* 补充单位，可根据需求调整底部页边距 */
    margin-bottom: 10mm;
  }
  thead {
    display: table-header-group;
  }
  .header {
    position: fixed;
    height: 320px;
    top: 0mm;
    width: 100%;
  }
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 按你实际页脚高度调整即可 */
    height: 80px;
  }
}

兼容备选方案 #

如果部分浏览器对absolute定位适配有问题，可改用flex布局实现：

@media print {
  html,
  body {
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 320px;
    box-sizing: border-box;
  }
  @page {
    size: A4;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10mm;
  }
  thead {
    display: table-header-group;
  }
  .header {
    position: fixed;
    height: 320px;
    top: 0mm;
    width: 100%;
  }
  /* 中间内容区域自动撑开剩余高度，将页脚顶到最后一页底部 */
  .table, .summarize {
    flex-grow: 1;
  }
  .footer {
    margin-top: auto;
  }
}

注意事项 #

• 需保证footer高度固定，预留的padding-bottom和footerheight数值匹配即可避免内容重叠
• 不同浏览器打印渲染有细微差异，可根据实际效果微调边距数值

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