打印结束时如何避免多余的空白页？
我正在使用一个CSS属性，
如果我使用page-break-after: always; =>它打印一个额外的空白页之前
如果我使用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>
你可以添加
.print:last-child { page-break-after: auto; }
所以最后的print元素不会得到额外的分页符。
请注意，如果您正在瞄准浏览器的这个恶意软件，那么IE8不支持最后一个子select器。
你尝试过吗？
@media print { html, body { height: 99%; } }
这里描述的解决scheme帮助我（ web存档链接 ）。
首先，你可以添加边界到所有元素，看看是什么导致一个新的页面被追加（也许一些利润，填充等）。
div { border: 1px solid black;}
解决scheme本身是添加以下样式：
html, body { height: auto; }
这对我有用
.print+.print { page-break-before: always; }
如果你只是想使用CSS，并想避免分页，然后使用
.print{ page-break-after: avoid; }
看看分页的媒体
您可以使用pageBreakBefore和pageBreakAfter的等效脚本，dynamic分配其值。 例如，您可以创build一个脚本来使其成为可选的，而不是在访问者上强制自定义分页符。 在这里，我将创build一个checkbox，在标题（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 }
点击这里查看使用这个的例子。 您可以用另一个标记（如P或DIV）replace脚本中的H2。
不知道（至less）为什么，但是这个帮助：
@media print { html, body { border: 1px solid white; height: 99%; page-break-after: avoid; page-break-before: avoid; } }
希望有人在解决问题的同时挽救他的头发…;）
设置display:none不适用于所有其他不打印的元素。 设置visibility:hidden将隐藏，但他们都在那里，为他们腾出空间。 空的页面是为那些隐藏的元素。
在经历了各种分页设置和高度以及身体标签上的一百万种CSS规则之后，我终于在一年之后解决了这个问题。
我有一个div，它应该是打印页面上唯一的东西，但是之后我得到了几个空白页面。 我的身体标记设置为visibility:hidden; 但这还不够。 垂直高的页面元素仍占用“空间”。 所以我在我的打印CSS规则中添加了这个：
#header, #menu, #sidebar{ height:1px; display:none;}
通过其包含高页面布局元素的ID来针对特定的div。 我缩小了高度，然后从布局中移除它们。 没有更多的空白页面。 多年后，我很高兴地告诉我的客户我破解了它。 希望这有助于某人。
似乎有很多可能的原因，可能的主题是身体标签结束高度被认为是太大的原因。
我的原因： min-height: 100%基本样式表中的min-height: 100% 。
我的解决scheme： min-height: auto在@media print指令中。
请注意，根据PhpStorm的说法， auto似乎并不是一个正确的值。 但是，根据Mozilla 有关最小高度的文档 ，这是正确的：
汽车
Flex项目的默认最小大小，为其他布局提供比0更合理的默认值。
在我的情况下，设置宽度的所有divs帮助：
.page-content div { width: auto !important; max-width: 99%; }
将这个CSS添加到相同的页面来扩展CSS文件。
<style type="text/css"> <!-- html, body { height: 95%; margin: 0 0 0 0; } --> </style>
我尝试了所有的解决scheme，这对我有用：
<style> @page { size: A4; margin: 1cm; } .print { display: none; } @media print { div.fix-break-print-page { page-break-inside: avoid; } .print { display: block; } } .print:last-child { page-break-after: auto; } </style>
Chrome似乎有一个bug，在某些情况下，使用display：none隐藏元素后，会留下很多额外的空间。 我猜想他们正在计算文档的高度之前，文档完成呈现。 Chrome还会触发2个媒体更改事件，并且不支持打印前等。它们基本上是打印的。 这是我的解决方法：
@media print { body { display: none; } } body.printing { display: block; }
您准备好文档上的body class =“printing”，并启用打印样式。 该系统允许打印样式的模块化，以及浏览器内的打印预览。
