如何解决用元素填充页面以打印最多页边距
我正在尝试将<div>
设置为100vh
和100vw
(相对视口高度和宽度的MDN tutorial)填充要打印的页面。
我希望页面(和视口)被带有红色边框的灰色矩形填充到边缘。
经过测试
- Chrome(85.0.4183.102)
- 边缘(44.18362.449.0)
- Firefox(80.0.1)
Chrome浏览器:
- 屏幕:确定
- 打印预览:确定
- 打印(PDF):确定
边缘:
- 屏幕:无底边框
- 打印预览:确定
- 打印:确定
Firefox:
- 屏幕:无底边框
- 打印预览:一页右侧有红色矩形框,不填满页面(约3/4)
- 打印(至PDF打印机):两页,右侧为截止页
启用“缩小以适合”会在打印预览中导致空白页,并且打印是一个大约2/3宽度和高度的矩形。 以0的边距和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,#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>
解决方法
这是Firefox的问题。计划于2020年9月22日发布的版本81对此情况提供了更好的支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。