用元素填充页面以打印到页边距

Question

我正在尝试使用 <div> 设置为 100vh 和 100vw（MDN tutorial 在相对视口高度和宽度上）来填充要打印的页面。

我希望页面（和视口）用带红色边框的灰色矩形填充到页边距。

测试

Chrome (85.0.4183.102)
边缘 (44.18362.449.0)
火狐 (80.0.1)

Chrome:

屏幕：正常
打印预览：OK
打印 (PDF)：好的

边缘：

屏幕：无底边框
打印预览：OK
打印：OK

火狐：

屏幕：无底边框
打印预览：右侧有红色矩形截断的页面，未填满页面（约 3/4）
打印（到 PDF 打印机）：两页，右侧截断

启用“缩小以适合”会导致打印预览中出现空白页，并且打印件是大约 2/3 宽度和高度的矩形。以零边距和 100% 打印到 A4，预览看起来像 FF 混淆了横向和纵向并在右侧被切断，但“打印”几乎是正确的，红线和底边之间只有一点缝隙页面。

似乎 Firefox 中的边距被破坏了，那么 https://bugzilla.mozilla.org/show_bug.cgi?id=1329527 可能是相关的。

但是在我打开另一个错误报告之前，有人可以确认我对 CSS 的处理方法是正确的吗？是否有另一种方法/解决方法可以让它在所有当前浏览器中工作？

html,
body,
#test {
  margin: 0;
  padding: 0;
}

#test {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  border: 1px solid red;
  background: gray;
}

<div id="test"></div>

我实际上正在使用这个文件进行测试：

<!doctype html>
<html lang="en">
    <head>
        <meta charset=UTF-8>
        <title>test</title>
        <style>
            html, body, #test{ 
                margin:0; 
                padding:0;
            }
            #test{
                box-sizing: border-box;
                height: 100vh;
                width: 100vw;
                border: 1px solid red;
                background: gray;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>

Answer 1

这是 Firefox 的问题。 81版本，计划于2020-09-22发布，对这种场景的支持更好

用元素填充页面以打印到页边距

Fill page with element to print up to margins

html

css

printing

cross-browser