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

Question

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

的CSS

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

当我在Google Chrome浏览器中打印时，我打印的div仅会与div中的内容一样高。
我能解决这个问题吗？
是否可以使div达到所选纸张尺寸的高度？

Answer 1

我发现最简单的方法是使用视口单位和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;
}

通过这种方式，您可以在需要的页面中包含您的内容。

Answer 2

看看媒体查询。

@media print {
    html, body {
        height: 100%;
    }
}

所以你可以改变输出而不会弄乱你的屏幕布局

Answer 3

如果在末尾添加分页符，则元素将延伸到最后一页的底部。如果您希望页脚出现在最后一页的底部，这将特别有用：

<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>

这不会给你一个额外的空白页——只要你在分页符之后没有任何内容（绝对定位的页脚不计算在内，除非它以某种方式溢出到第二页）。注意延伸到身体之外的边缘！

Answer 4

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% };