Question

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

CSS

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

当我在Google Chrome中打印时，我的打印div只会与div中的内容一样高。
我可以解决这个问题吗？是否可以将div设置为所选纸张尺寸的高度？

Answer 1

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

另外，如果位置绝对不行，你可以对位置做同样的事情：固定;这将起作用，但可能会对您的布局造成更多损害，具体取决于所有内容的排列方式：）

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

Answer 2

查看媒体查询。

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

因此，您可以更改输出而不会弄乱屏幕布局

Answer 3

你需要让你的身体100％正常工作。

html, body {
    height: 100%;
}

这需要完成，因为你知道你的内容在体内。身体的默认高度不是100％，因此身体高度只会适应其内部的内容，除非您手动给它一个高度，如上例所示。

Answer 4

如果向末尾添加分页符，则该元素将扩展到最后一页的底部。如果您希望页脚显示在最后一页的底部，它会特别有用：

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

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

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

@page {
    margin: 10mm;
}

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

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

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

Answer 6

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

这样，您可以将内容包含在需要的页面中。

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

6 个答案: