CSS打印多份A4页面出现多余空白页的技术求助

我明白你遇到的困扰——做类Google Docs的应用，视图里的A4页在打印时居然出现空白页，还要支持相对+绝对定位的元素，确实头疼。咱们一步步来解决：

问题根源分析 #

1. 尺寸单位不一致：你用了in作为A4尺寸单位，但部分浏览器打印引擎对英寸的解析可能和厘米有细微偏差，导致.sheet实际尺寸超出@page的范围，触发意外分页。
2. 分页规则过于绝对：给所有.sheet加page-break-after: always会在最后一个页面后强制生成空白页；而你遇到的第二页空白，更可能是尺寸偏差导致第一个sheet溢出，把第二个sheet挤到第三页。
3. 缺少相对定位容器：要让绝对定位元素基于.sheet定位，必须给.sheet加上position: relative，否则元素会基于更高层级的容器定位。

修改后的完整代码 #

HTML部分（无需改动） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pages</title>
</head>
<body>
  <div class="sheet"></div>
  <div class="sheet"></div>
  <div class="sheet"></div>
</body>
</html>

CSS部分（关键修改） #

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  margin: 0;
  font-family: "Muli", sans-serif;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen {
  body {
    background: #f8f9fa;
  }
  .sheet {
    background: white;
    box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    /* 给screen模式下的sheet加一点间距，方便查看 */
    margin: 2rem auto;
  }
}

@page {
  size: A4 portrait;
  margin: 0; /* 和sheet的padding配合，确保内容区域一致 */
}

.sheet {
  width: 21cm; /* A4标准宽度 */
  height: 29.7cm; /* A4标准高度 */
  padding: 1.5cm;
  position: relative; /* 核心：让绝对定位元素基于此容器 */
}

@media print {
  /* 只给非最后一个sheet加分页，避免末尾空白页 */
  .sheet:not(:last-child) {
    page-break-after: always;
  }
  /* 可选：强制打印背景色，确保sheet的白色背景显示 */
  .sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

关键修改说明 #

• 统一尺寸单位：用A4标准的厘米单位（21cm×29.7cm）替代英寸，避免浏览器解析偏差，确保.sheet完全适配@page的尺寸。
• 优化分页规则：使用:not(:last-child)选择器，只在除最后一个外的sheet后添加分页，彻底避免空白页问题。
• 添加相对定位：给.sheet加上position: relative，这样你在sheet内使用position: absolute的元素会正确基于该容器定位，满足布局需求。
• 可选背景色打印：添加print-color-adjust属性，确保打印时能显示sheet的白色背景（部分浏览器默认不打印背景）。

这样修改后，打印预览里的三页应该都能正常显示，不会有空白页，同时绝对定位元素也能正常工作啦～

内容的提问来源于stack exchange，提问作者Ronald Groot Jebbink