我们如何防止块在不同的页面上打印答案

【问题标题】：how can we prevent a block from being printed across different pages我们如何防止块在不同的页面上打印
【发布时间】：2015-12-01 01:46:00
【问题描述】：

在我的网站上，我希望在 divA 之后立即打印 divB。但是如果 divB 的内容暗示 divB 打印在两页上，我想在前面插入一个分页符，这样 divB 就不会打印在两页上，而是只打印一页。

理想情况下，我如何使用 css 来做到这一点，否则使用 javascript？

非常感谢！

编辑：

在下文中，divB 太大，因此将分成两页。然后我想在 divB 之前插入一个分页符，以便在不同的页面上打印。

但是如果 divA 和 divB 足够小以保持在同一页面上，我不想要分页符。

【问题讨论】：

好吧，我唯一知道的就是如何在 divB 之前添加分页符。至少它不会在两页上打破它。但如果 divA 的内容允许两个 div 保持在同一页面上，那就更好了！
1 page 和 2 pages 是什么意思？
@Rooster 我相信 OP 正在讨论在纸上打印网页的分页符。 Sebastien，如果您提供您正在使用的代码示例或您想要实现的目标的视觉图像，将会很有帮助。
你希望 div "B" 将 page-break-inside 设置为 "avoid"

标签： javascript html css printing media-queries

【解决方案1】：

您可能希望为您的元素使用一些带有cm 或pt 单位的打印样式表，这样您就可以调整它们打印在纸上的物理尺寸。我建议你看看这个帖子： How To Set Up A Print Style Sheet

【讨论】：

【解决方案2】：

假设你有 <div id="divB">...</div>，你可以使用这个 CSS。如果 DIV 没有 id，而是有一个类，则应将选择器部分 (#divB) 更改为可以针对该元素的任何内容。

@media print {
  #divB { page-break-before: always;}
}

【讨论】：

不是我的问题的答案。我想有条件地设置分页符。如果 2 个 div 小到可以完全打印在同一页上，我不想要任何分页符

【解决方案3】：

没有好的通用解决方案。正如一些人指出的那样，您可以在

"B" 之前放置一个分页符......但是您总会得到它。即使“A”和“B”都适合一页。

您可以在

"B" 上使用 page-break-inside="avoid"。这可能更接近您想要的。如果“B”不适合“A”的页面，“B”将全部移到下一页。

但是……这有副作用，因为还有第三种可能性。如果“B”的内容太大以至于它本身不适合页面怎么办？将会发生的事情是它会按照您的想法进行操作，将“B”移动到下一页并尝试使用“B”构建该页面。它将无法满足“B”避免内部分页符的条件，因此它将打破该条件。不幸的是，直到页面末尾才知道这一点，因此您最终会得到一个空白页面。

如果您知道“B”总是适合一页，那么您可以使用 page-break-inside="avoid"，这样就可以了。但是，如果它不这样做，那么您将无济于事。

类似问题的稍微冗长的解释在这里：

HTML/CSS: empty page + only header page when printing table

所以你真正想要的是将三件事合二为一......（1）你希望它避免在中出现分页符，只要它不超过一页，否则，（ 2）除非它适合当前页面，否则您希望在（3）之前分页。不幸的是，这不存在。你只能用 Javascript 来做到这一点。您可以为 div 设置页面的宽度，然后获取 div "A" 和 div "B" 的高度，然后决定在打印过程中动态插入这些 CSS 属性。

【讨论】：

很好，这就是我问题的答案，谢谢。我会尝试用javascript动态插入它。