2

我正在尝试格式化网页以进行打印。第一页是带有全出血背景的封面。其余页面有边距。

@page {
   margin: 2cm;
}
@page :first {
   margin: 0;
}
.cover {
   display: block;
   height: 100%;
   width: 100%;
   background-color: green;
   page-break-after: always;
}

<div class="cover"></div>
<p>HUGE BLOCK OF BODY TEXT...</p>

第一页看起来很完美，没有边距，但所有剩余的有边距的页面都被切断了文本。

0 页边距的第一页

内页 2cm 页边距

问题似乎是第一页。当我注释掉第一页的 margin: 0 时，所有剩余的页面看起来都是正确的。

第一页有 2 厘米的边距

内页 2 厘米边距

是否有使用 @page :first 更改边距的正确方法，不会影响其余页面？

4

2 回答 2

0

花了一些时间搜索，但似乎它以前曾作为 Chrome 的一个可能错误出现。

请参阅其他问题https://stackoverflow.com/a/14008461/704765

如果您有一个内容容器并应用了 2 厘米的填充，则填充解决方案可能会起作用，但是在分页符处，它不会在顶部或底部应用填充。

于 2021-08-11T20:30:06.920 回答
0

我遇到了同样的问题，并找到了一些解决方法来解决这个问题。在我的方法中，我为至少有 1 个页面高度的页面创建包装器，并在第一个包装器之后强制每个包装器具有特定max-width的 . 我猜 chrome 的计算实现不好，width: 100%每次都基于第一页边距。

CSS：

@page {
  margin: 2cm;
}
@page:first {
  margin: 0;
}
body {
  margin: 0;
}
section.page {
  min-height: 100vh;
  page-break-before: always;
}
section.page--cover {
  background-color: blue;
}
section.page:not(:first-child) {
  /* We need to force page content to not be wider than actual page width */
  max-width: calc(100% - 4cm); /* (first page margin) x 2 */
}

HTML：

<section class="page page--cover">
  first cover page in wrapper (@page margin 0)
</section>
<section class="page">
  second page in wrapper (@page margin 2cm)
  content here can be longer then page height, in this solution 
  page break's should be working fine with given 2cm margins.
</section>
于 2021-11-16T17:15:46.393 回答