CSS打印时最后一页background-color属性不生效如何解决

解决方案 #

出现该问题的核心原因是：浏览器打印场景下，元素高度默认由实际内容高度决定，你仅为<html>标签设置了背景色，当最后一页内容不足时，<html>和<body>的实际渲染高度小于整页高度，无内容覆盖的区域就不会渲染背景色。

你可以按照如下方案调整样式：

修正后的完整打印样式代码 #

@media print {
  /* 配置打印纸张规则 */
  @page {
    size: A4 portrait; /* 按需调整纸张尺寸、横竖方向，可选值如 A4 landscape */
    margin: 0; /* 可自定义页边距，若保留边距需同步给内容容器加对应内边距避免内容贴边 */
  }

  html, body {
    /* 兼容不同内核的强制打印背景色规则 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-color: #013126 !important;
    /* 强制撑满整页高度 */
    width: 100%;
    min-height: 100vh;
    /* 清除默认边距避免额外空白 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 如果页面内容放在统一的外层容器（例如类名为.page-wrapper）中，补充以下规则 */
  .page-wrapper {
    min-height: 100%;
    box-sizing: border-box;
    /* 若@page设置了非0边距，这里加对应内边距，例如margin设为20mm就加padding:20mm */
    padding: 20mm;
  }
}

额外排查点 #

如果调整后仍存在空白，可检查两个配置：

• 确认打印设置中的「打印背景色和图像」选项处于开启状态，部分浏览器默认会关闭该选项导致所有背景色不生效
• 检查页面内是否存在break-after/page-break-after等分页属性，避免异常分页导致最后一页预留空白

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