html - 使div仅在特定高度打印的方法？

Question

我正在打印一个包含两个主要 div 的表单。一张打印出来后会被剪下来，另一张只包含客户信息。问题是第二个 div 的大小取决于我们在客户端本身的信息量。因此，如果我们有关于特定客户的大量信息，我们将需要打印多页。想要节省纸张，双面对我们来说没问题。如果需要多页打印，有没有一种方法或技巧可以使第二个 div 在一定高度处继续使用 css，这样当我们剪切第一个 div 时，不会剪切掉任何有关客户端的信息也。下面是所需结果布局的简单图片，其中红色框是要剪切的内容，蓝色框是客户信息所在的位置，虚线红色框只是空白区域。

Desired Outcome Layout

Answer 1

使用 @page CSS 规则在除第一个页面之外的所有页面上设置边距。边距以厘米为单位，如 margin-top: 10cm;

@page:not(:first) {
    margin-top: <<height of the red div>>;

}

请注意，@page 不允许定义除第一个页面之外的任何页面，因此此顶部间隙仍将出现在第 3、4 等页面上。

另请注意，@page 不支持 safari 和可能的其他浏览器:https://developer.mozilla.org/en-US/docs/Web/CSS/@page