时间戳

首页 > 解决方案 > 让 div 只打印在某个高度的方法？

html - 让 div 只打印在某个高度的方法？

问题描述

我正在打印一个包含两个主要 div 的表单。一份将在打印后从纸张上剪下，另一份仅包含有关客户的信息。问题是第二个 div 的大小取决于我们对客户端本身的信息量。因此，如果我们有很多关于特定客户的信息，我们将需要打印多页。想要节省纸张，双面打印对我们来说很好。如果需要多页打印，我们可以通过 css 实现第二个 div 将继续在某个高度上的方法或技巧，这样当我们剪切第一个 div 时，不会剪切任何有关客户端的信息也。下面是所需结果布局的简单图片，其中红色框是要剪切的内容，蓝色框是客户信息所在的位置，

期望的结果布局

标签： htmlcss

解决方案

使用@pagecss 规则在除第一页之外的所有页面上设置边距。边距以厘米为单位给出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

推荐阅读