时间戳

首页 > 解决方案 > CSS 打印多个 A4 页面会导致额外的空白页

html - CSS 打印多个 A4 页面会导致额外的空白页

问题描述

我已经阅读了很多关于使用 CSS 规则打印的文章，但我仍然遇到与往常一样的问题。

我的应用程序将以非常简单的方式看起来像 Google Docs。我想要的是在我的视图中有多个 A4 页面，当我点击“打印”时，我希望看到相同的 A4 页面进行打印。

<!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;
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}

.sheet {
  width: 8.27in;
  height: 11.69in;
  padding: 1.5cm;
}

@media screen {
  .sheet {
    background: white;
    box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  }
}

@media print {
  .sheet {
    page-break-after: always;
  }
}

但现在我有3 页。第二个是空的。

我可以选择仅在“屏幕”模式下使用宽度和高度，但如果我想position: relative在带有一些position: absolute.

标签： htmlcssprinting

解决方案

推荐阅读