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

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

CSS

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

当我在Google Chrome中打印时，我打印的div将仅与div中的内容一样高。
我能解决这个问题吗？
有没有可能制作一个与所选纸张尺寸一样高的div

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

此外，如果绝对位置不起作用，您可以对位置执行相同的操作：固定；这会起作用，但可能会对布局造成更大的破坏，具体取决于一切的安排方式：）

---

我会编辑它使它更明显，所以。。。如果您使用的是位置固定，并且您有多个页面，那么它们只会将一个页面放在另一个页面的顶部，这样做是不对的。。。但是为了得到正确的绝对位置结果，你必须记住这里的css样式将占据100%的高度，但它是它的父级的高度。。。因此，如果父对象是body，只需添加

html，body{height:100%}
你需要让你的身体100%正常工作

html, body {
    height: 100%;
}

这需要做，因为你知道你的内容在身体内。主体没有100%的默认高度，因此主体的高度将只适应其自身的内容，除非您手动为其指定如上面示例所示的高度。
查看媒体查询

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


满足于此

页脚

这不会给你一个额外的空白页——只要你在分页符后没有任何内容（绝对定位的页脚不算在内，除非它以某种方式溢出到第二页上）。注意延伸到身体外部的边缘
 我发现最简单的方法是使用视口单位和
分页符：始终
。这适用于打印多个页面

我建议您按照以下方式构建HTML：

<div class="someContainerClass">
  <section id="pageOne"></section>
  <section id="pageTwo"></section>
  <section id="pageThree"></section>
</div>

通过这种方式，您可以在需要的页面中包含内容。
我在设置填充页面的高度时遇到问题，因为当我只需要一个页面时，它总是会生成一个空白的第二页。然后我意识到这是因为印刷页边距

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

@page {
    margin: 10mm;
}

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

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

这将正好适合一个页面，并根据页面大小和方向进行调整。
给它一个绝对位置并设置top:0px&botton:0px；我的upv，但你可能也想解释一下为什么这一个工作得很好。但我已经在“分页符”中分离了页面，现在只显示了一页供打印…我猜您使用的位置是：固定；因为你有更多的页面，所以它们重叠了。。你必须在这里组合答案，将主体的高度和html添加到100%，将div保留在绝对位置，其余部分保持原样（顶部和底部0px）-你需要将此div作为主体的第一个子对象。。。否则它只会达到其父级的高度：）谢谢。在我的例子中，我还需要这些样式：
left:0px；左边距：0px！重要的我不知道最初的问题，但这正是我想要的。非常感谢。谢谢，当您试图打印HTML页面并希望页脚位于页面底部时，此选项有效。只有在页面设置中禁用页边距时，100vh才有效。否则，您的元素将溢出页面。谢谢，我确实添加了一个底部边距来防止这种情况发生，但删除所有边距将是一个更干净的解决方案。您可以使用
@page
来操作页面设置。至少适用于FF和Chrome。这是最好的解决方案，但这会打乱FF打印预览
.fit-to-page {
    height: calc(100vh - 20mm);
}