html - Chrome 打印时莫名其妙的空白区域

Question

Chrome(和其他 WebKit 渲染引擎)在打印时生成看似莫名其妙的空白。代码在 CodePen 链接中，但用图片更容易解释:

---

Chrome 打印的实际结果(打印 View 的屏幕截图):

此外，它看起来确实设置了“默认”边距，但我不明白没有它们的行为，“默认”:

---

@page {
   size: 320mm 120mm;
   margin: 10mm;
   padding: 0;
   border: none;
   border-collapse: collapse; 
}

http://codepen.io/anon/pen/obqLyy

随机空白的另一个例子(完整的 html，可以直接复制到记事本或其他):http://pastebin.com/wUXsqWae

如果问题看起来含糊不清，那就是:“为什么在尝试无边距打印时图像的底部和右侧有空白？”

编辑:所以，我测试了一下，似乎元素没有完全覆盖 body ，边框没有按照盒子模型的预期表现:

这几乎解决了我的问题，但我之前已经看到过 border-collapse 的问题 - 我不知道它在这里做什么并且很想知道。

编辑:重新启动我的电脑，现在最后一张图片中多余的 body 空间在右边而不是底部。这很愚蠢。

Answer 1

出现边框的解释:

• 您的 div 大小为 280mm x 80mm。比例(280/80)为3.5。
• 您的页面 大小为 320mm x 120mm。比例(320/120)为2.67。

当您要求 Chrome 移除页面的边距时，您最终会得到一个具有相同大小和比例 (3.5) 的 div 以及一个按比例缩小的 page尝试将 div 放入，但页面的大小仍然是 2.67 的比例。这解释了神奇地出现的边距。

我现在正在想办法解决这个问题，但这应该能让您走上正轨。祝你好运!

更新

宁愿阅读更新#2。

应用我在上面解释的内容创建了一个 pastebin:http://pastebin.com/48RqpBFV我将 1mm 添加到您的页面大小(现在是 102mm)，因为:车身尺寸:99/74 = 1,33784但是页面大小:101/76 =/= 1,33784将这 1 毫米添加到您的页面宽度固定边框。

更新 #2

http://pastebin.com/Dq837cXp你的第二个模型的最终 pastebin。我使用了以下修复:

@page {
   size: 101.6mm 76mm;
   padding: 0;
   margin:1mm;
   border: none;
   border-collapse: collapse;
}

并在 .reportBody 中添加了 max-height:100%;。令人惊讶的是，您实际上可以向毫米添加更多数字。 101.6 毫米使其完全符合您想要的比例，并且 max-height:100%; 阻止 Chrome 制作另一个页面。