CSS 打印时如何避免在末尾出现额外的空白页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7846346/
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 avoid extra blank page at end while printing?
提问by Angelin Nadar
I'm using a CSS property,
我正在使用 CSS 属性，
If I use page-break-after: always;=> It prints an extra blank page before
如果我使用page-break-after: always;=> 它之前会打印一个额外的空白页
If I use page-break-before: always;=> It prints an extra blank page after. How to avoid this?
如果我使用page-break-before: always;=> 它会在之后打印一个额外的空白页。如何避免这种情况？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
page-break-after: always;
}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
采纳答案by AKX
You could maybe add
你可以添加
.print:last-child {
page-break-after: auto;
}
so the last printelement will not get the extra page break.
所以最后一个print元素不会得到额外的分页符。
Do note that the :last-child selector is not supported in IE8, if you're targetting that wretch of a browser.
请注意 :last-child 选择器在 IE8 中不受支持，如果您的目标是浏览器的那个可怜虫。
回答by giannis.epp
Have you tried this?
你试过这个吗？
@media print {
html, body {
height: 99%;
}
}
回答by Michael Radionov
Solution described herehelped me (webarchive link).
此处描述的解决方案帮助了我（webarchive 链接）。
First of all, you can add border to all elements to see what causes a new page to be appended (maybe some margins, paddings, etc).
首先，您可以为所有元素添加边框以查看导致附加新页面的原因（可能是一些边距、填充等）。
div { border: 1px solid black;}
And the solution itself was to add the following styles:
解决方案本身是添加以下样式：
html, body { height: auto; }
回答by Bryan Chan
if None of those works, try this
如果这些都不起作用，试试这个
@media print {
html, body {
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
make sure it is 100vh
确保它是 100vh
回答by Lam
This works for me
这对我有用
.print+.print {
page-break-before: always;
}
回答by bilash.saha
If you just wanna use CSS and wanna avoid page break then use
如果您只想使用 CSS 并想避免分页，请使用
.print{
page-break-after: avoid;
}
Take a look at paged media
看看分页媒体
You can use scripting equivalents for pageBreakBefore and pageBreakAfter,dynamically assign their values. For example, instead of forcing custom page breaks on your visitors, you can create a script to make this optional. Here I'll create a checkbox that toggles between slicing the page at the headers (h2) and at the printer's own discretion (default):
您可以使用 pageBreakBefore 和 pageBreakAfter 的脚本等效项，动态分配它们的值。例如，您可以创建一个脚本来使其成为可选项，而不是对访问者强制自定义分页符。在这里，我将创建一个复选框，用于在页眉 (h2) 处的页面切片和打印机自行决定（默认）之间切换：
<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>
<script type="text/javascript">
function breakeveryheader(){
var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
for (i=0; i<document.getElementsByTagName("H2").length; i++)
document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}
Click herefor an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV.
单击此处查看使用它的示例。您可以将脚本中的 H2 替换为另一个标记，例如 P 或 DIV。
回答by Adam G.
Don't know (as for now) why, but this one helped:
不知道（就目前而言）为什么，但这有帮助：
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
Hope someone will save his hair while fighting with the problem... ;)
希望有人能在解决问题的同时挽救他的头发......;）
回答by Janaka R Rajapaksha
set display:nonefor all other elements which are not for prints.
setting visibility:hiddenwill keep them hidden, but they all are still there and have taken space for them. empty page is for those hidden elements.
display:none为不用于打印的所有其他元素设置。设置visibility:hidden会将它们隐藏起来，但它们仍然存在并为它们占用了空间。空页面用于那些隐藏的元素。
回答by Afshin Razaghi
I changed css display and width property of print area
我更改了打印区域的 css 显示和宽度属性
#printArea{
display:table;
width:100%;
}回答by Marjanus
In my case setting width to all divs helped:
在我的情况下，为所有 div 设置宽度有帮助：
.page-content div {
width: auto !important;
max-width: 99%;
}
