css - page-break-inside : avoid 的替代方案

Question

我有一个生成优惠券的页面。每张优惠券都是一个 div，其高度因内容而异。我想在每一页上打印尽可能多的优惠券，但我不希望优惠券被分成几页。 CSS 属性 page-break-inside 正是我所需要的。但是，我需要它才能在 Firefox 和/或 Chrome 上工作。和 this is not supported . Two years和 one year ago问了同样的问题，对此没有好的选择。我们正在进一步开发大量 CSS3/HTML5/整体浏览器...是否有其他方法可以使它正常工作？

例子在这里: http://jsfiddle.net/e3U66/2/

假设页面在打印时尺寸为 1000 像素。我希望第二个 DIV 出现在第二页上，否则它会在第一页和第二页上分开。此代码适用于 Opera，但不适用于 FF 或 Chrome。

Answer 1

为什么不呢，页面加载完你的内容后，用js滚动内容，把div的高度加起来。

一旦达到 1000px 或您确定的任何页面高度，然后插入一个空白 div 样式为 page-break-before 在最新的 div 之前。