时间戳

首页 > 解决方案 > 用元素填充页面以打印到边距

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

问题描述

我正在尝试使用一<div>组来填充要打印的页面100vh和100vw（关于相对视口高度和宽度的MDN 教程）。

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

经测试

铬合金：

边缘：

火狐：

启用“缩小以适应”会导致打印预览中出现空白页，并且打印是大约 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>

标签： htmlcssprintingcross-browser

解决方案

这是火狐的问题。计划于 2020 年 9 月 22 日发布的版本 81 对这种场景有更好的支持。

推荐阅读