如何将高度设置为所选打印纸的 100%？
CSS
width: 100%;
height: 100%;
margin: auto;
margin-top: 0px !important;
border: 1px solid;
当我在谷歌浏览器中打印时，我打印的 div 将仅与 div 中的内容一样高。
我可以解决这个问题吗？
是否可以使 div 与所选纸张大小一样高？
【问题讨论】：
width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;
另外，如果绝对位置不起作用，您可以使用 position:fixed;这将起作用，但可能会对您的布局造成更多损害，具体取决于所有内容的排列方式:)
我将对其进行编辑以使其更明显，所以...如果您使用的是固定位置并且您有多个页面，它们只会一个在另一个之上，这样就不对了...但是为了获得绝对位置的正确结果，您必须记住，这里的 css 样式将占用 100% 的高度，但它是它的父级的高度......所以如果父级是身体，只需添加 @987654322 @
【讨论】：
left:0px;margin-left: 0px !important;
我发现最简单的方法是使用视口单位和page-break-after:always。这适用于打印多页。
我建议像这样构建您的 HTML：
<div class="someContainerClass">
<section id="pageOne"></section>
<section id="pageTwo"></section>
<section id="pageThree"></section>
</div>
并使用这个 CSS：
section {
width: 100vw;
height: 100vh;
page-break-after: always;
}
这样您就可以将您的内容包含在需要的页面中。
【讨论】：
@page 来操作页面设置。至少适用于 FF 和 Chrome。
看看媒体查询。
@media print {
html, body {
height: 100%;
}
}
这样您就可以在不弄乱屏幕布局的情况下更改输出
【讨论】：
如果在末尾添加分页符，则元素将延伸到最后一页的底部。 如果您希望页脚出现在最后一页的底部，这将特别有用：
<div style='position:relative;overflow:hidden;background:#ffe!important'>
<div style='margin-bottom:200px'>
<p>Content here</p>
</div>
<div style='page-break-before:always'></div>
<div style='position:absolute;bottom:0'>Footer</div>
</div>
这不会给您额外的空白页 - 只要您在分页符之后没有任何内容（绝对定位的页脚不算数，除非它以某种方式溢出到第二页上）。注意超出身体的边缘！
【讨论】：
我在设置填充页面的高度时遇到问题，因为当我只想要一个页面时，它总是会产生空白的第二页。然后我意识到这是因为打印边距。
这些边距不是跨浏览器标准化的，但您可以在 CSS 中自己指定它们：
@page {
margin: 10mm;
}
然后您需要从总高度中减去边距以将内容放入单个页面中，即：
.fit-to-page {
height: calc(100vh - 20mm);
}
这将恰好适合一页并根据页面大小和方向进行调整。
【讨论】：
你需要让你的身体 100% 这应该起作用。
html, body {
height: 100%;
}
这需要完成，因为您知道您的内容在正文中。 body 没有 100% 的默认高度，所以 body 的高度只会适应其自身的内容，除非你手动给它一个高度，如上例所示。
【讨论】：