打印 html 页面 - 分页答案

【问题标题】：Printing a html page - page breaking打印 html 页面 - 分页
【发布时间】：2011-11-01 13:09:35
【问题描述】：

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

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

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

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

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

EDIT ：我使用特定于打印的 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----------

【问题讨论】：

让我们弄清楚这一点，您希望分页符发生在
之间而不是在它们内部？但是如果有足够的空间容纳另一个
，您不想要分页符？
确保打印页中假定的高度正确。真的是800吗？更多的？少一点？
这有帮助吗？ stackoverflow.com/questions/6104622/…
@ibrahim，问题不在于假设的高度。我在媒体和打印中都有相同的字体大小 12 pt。但在屏幕上显示不同，在纸上显示不同。因此，屏幕上的 800 像素在纸上看起来更大。
@ibrahim 这就是我现在正在做的事情。但是屏幕和打印之间的高度会失真