如何将 div 高度设置为所选打印纸的 100%？

Question

如何将高度设置为所选打印纸的 100%？

CSS

 width: 100%;
height: 100%;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

当我在谷歌浏览器中打印时，我打印的 div 只会与 div 中的内容一样高。

我可以解决这个问题吗？

是否可以使 div 与所选纸张尺寸一样高？

原文由 Björn C 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

此外，如果绝对位置不起作用，您可以使用 position:fixed;这将起作用，但可能会对您的布局造成更多损害，具体取决于一切的安排方式:)

我将对其进行编辑以使其更加明显，因此…如果您使用的是固定位置并且您有多个页面，它们只会一个在另一个页面上，这样就不对了…但是为了使用绝对位置获得正确的结果你必须记住，这里的 css 样式将占用 100% 的高度，但它是它的父级的高度……所以如果父级是身体，只需添加 html, body{ height:100% };

原文由 Spluf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在设置高度以填充页面时遇到问题，因为当我只想要一个页面时，它总是会产生空白的第二页。然后我意识到这是因为打印边距。

这些边距不是跨浏览器标准化的，但您可以在 CSS 中自己指定它们：

 @page {
    margin: 10mm;
}

然后，您需要从总高度中减去边距以将内容放入单个页面中，即：

 .fit-to-page {
    height: calc(100vh - 20mm);
}

这将恰好适合一页并根据页面大小和方向进行调整。

原文由 dyoung 发布，翻译遵循 CC BY-SA 4.0 许可协议