CSS 如何将 div 高度设置为所选打印纸的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36690580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set div height to 100% of chosen print paper?
提问by Bj?rn C
How can i set the height to 100% of chosen print paper?
如何将高度设置为所选打印纸的 100%？
CSS
CSS
width: 100%;
height: 100%;
margin: auto;
margin-top: 0px !important;
border: 1px solid;
When i print in Google Chrome, my printed div will only be as high as the content in the div.
Can i solve this?
Is it possible to make a div as high as chosen paper size?
当我在 Google Chrome 中打印时，我打印的 div 只会与 div 中的内容一样高。
我能解决这个问题吗？
是否可以将 div 设置为与所选纸张尺寸一样高？
采纳答案by Spluf
width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;
also, if position absolute won't work you can do the same with position:fixed; this will work but might do some more damage to your layout, depending on how everything is arranged :)
此外，如果绝对位置不起作用，您可以使用 position:fixed; 做同样的事情。这会起作用，但可能会对您的布局造成更多损害，具体取决于所有内容的排列方式:)
I'll edit this to make it more obvious, so... if you are using position fixed and you have multiple pages they will just go one on top of the other so that wouldn't be right... but in order to get the right result with position absolute you have to keep in mind that the css style here will take 100% of the height, but it's the height of it's parent... so if the parent is the body just add html, body{ height:100% };
我将对其进行编辑以使其更明显，因此...如果您使用固定位置并且您有多个页面，它们只会在另一个页面上显示一个，这样就不正确...但是为了使用绝对位置获得正确的结果，您必须记住，此处的 css 样式将占据高度的 100%，但它是其父级的高度...所以如果父级是主体，则只需添加 html, body{ height:100% };
回答by yezzz
Have a look at media queries.
看看媒体查询。
@media print {
html, body {
height: 100%;
}
}
So you can change output without messing up your screen layout
所以你可以改变输出而不会弄乱你的屏幕布局
回答by UXCODA
The easiest way I found to do this was use Viewport units and page-break-after:always. This works well for printing multiple pages.
我发现最简单的方法是使用视口单位和page-break-after:always. 这适用于打印多页。
I suggest structuring your HTML like this:
我建议像这样构建你的 HTML：
<div class="someContainerClass">
<section id="pageOne"></section>
<section id="pageTwo"></section>
<section id="pageThree"></section>
</div>
And using this CSS:
并使用此 CSS：
section {
width: 100vw;
height: 100vh;
page-break-after: always;
}
This way you can contain your content in the page it needs to be.
通过这种方式，您可以在需要的页面中包含您的内容。
回答by SystemParadox
If you add a page break to the end, the element will extend to the bottom of the last page. It's particularly useful if you want a footer to appear at the bottom of the last page:
如果在末尾添加分页符，则元素将延伸到最后一页的底部。如果您希望页脚出现在最后一页的底部，这将特别有用：
<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>
This won't give you an extra blank page - so long as you don't have any content after the page break (the absolutely positioned footer doesn't count, unless it somehow spills onto the second page). Watch out for margins which extend outside the body!
这不会给你一个额外的空白页——只要你在分页符之后没有任何内容（绝对定位的页脚不计算在内，除非它以某种方式溢出到第二页）。注意延伸到身体之外的边缘！
回答by Daniel Alsaker
You need to make your body 100% this should work.
你需要让你的身体 100% 这应该工作。
html, body {
height: 100%;
}
This needs to be done because as you know your content is within the body. The body does not have a default height of 100%, so the bodys height will just adapt to the content within itself, unless you manually give it a height like shown in the example above.
这需要完成，因为您知道您的内容在正文中。正文没有 100% 的默认高度，因此正文的高度只会适应其自身的内容，除非您手动为其指定一个高度，如上例所示。
