css - 打印 html 页面 - 分页

Question

我有一个页面，其中有一堆 divs 一个接一个，由一个循环生成，都具有相同的类，并且所有 divs 都包含图像和文本。我需要设计此页面的样式以进行打印。我遵循了与尺寸、颜色、边距等相关的所有基本原则。

但是，我不希望这些框在打印时在页面之间拆分，因为当一个框在页面末尾附近开始时会发生这种情况，并且打印了一些文本而其余部分在下一页上。当页面上 div 的总高度超过 800(假设值)时，我使用 javascript 插入一个分页 div(具有 page-break-before:always 样式)。

但是，当我打印时，文本大小发生变化，div 变长/变短，并且分页符放错了位置。

我正在做与 answer here 相同的事情说。我的问题是我假设打印页面的宽度/高度是多少？或者有更好的解决方案吗？

我该如何处理？提前致谢。

编辑:我使用特定于打印的 css，仅供引用。我也有特定的媒体风格和打印风格。

编辑(尝试可视化)

-------div 1------ 
 |                 |
 |                 |
 |                 |
  -----div 2-----
 |                 |         WRONG
 |                 |
 |                 |
  ----div 3-------
 |                 |
 |                 |
 |  auto page break|
 ----page 1 ends---- 
 |                 |
 |                 |
 |                 |
 ----div 4----------


 -------div 1------ 
 |                 |
 |                 |
 |                 |
  -----div 2-----
 |                 |         RIGHT
 |                 |
 |   script 
    generated 
     page break    |
  ----div 3-------
 |                 |
 |                 |
 |                 |
 ----page 1 ends---- 
 |                 |
 |                 |
 |                 |
 ----div 4----------

Answer 1

确保您使用的是为打印定义的 CSS:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

如果您的 CSS 将 media 属性设置为 screen 或 print 或 all 以外的属性，则打印机将看不到您的 CSS。