blocks|key|2929881|text|如果你只想使用CSS并且想要避免分页，那么使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2929882|.print{
++++page-break-after:+avoid;

}|code-block|syntax|javascript|2929883|看一看paged+media|offset|length|2929884|您可以为pageBreakBefore和pageBreakAfter使用脚本等效项，动态分配它们的值。例如，您可以创建一个脚本使其成为可选的，而不是对访问者强制自定义分页符。在这里，我将创建一个复选框，在页眉切片(h2)和打印机自行决定(默认)之间切换：|2929885|<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%2B%2B)
+document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
+}|2929886|​|2929887|单击here查看使用此方法的示例。您可以将脚本中的H2替换为另一个标记，如P或DIV。|2929888|http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml|2929889|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/page.html|1|http://www.javascriptkit.com/dhtmltutors/example.htm|2^0|0|0|3|B|0|0|0|0|0|2|4|1|0|0|1K|2|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@$I|18|J|19|1|1A]]|A|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@$I|1F|J|1G|1|1H]]|A|$]]|$1|S|3|T|5|6|7|1I|8|@]|9|@$I|1J|J|1K|1|1L]]|A|$]]|$1|U|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]|14|$5|X|Y|Z|A|$10|T]]]]

If you just wanna use CSS and wanna avoid page break then use 

<pre><code>.print{
 page-break-after: avoid;

}
</code></pre>

Take a look at <a href="http://www.w3.org/TR/CSS2/page.html" rel="noreferrer">paged media</a>

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):

<pre><code>&lt;form name="myform"&gt;
&lt;input type="checkbox" name="mybox" onClick="breakeveryheader()"&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i&lt;document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }
</code></pre>



Click <a href="http://www.javascriptkit.com/dhtmltutors/example.htm" rel="noreferrer">here</a> for an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV. 

<a href="http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml" rel="noreferrer">http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml</a>

blocks|key|3144629|text|你也许可以添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144630|.print:last-child+{
+++++page-break-after:+auto;
}|code-block|syntax|javascript|3144631|因此，最后一个print元素将不会获得额外的分页符。|offset|length|style|CODE|3144632|请注意，如果您针对的是一个可恶的浏览器，那么在IE8中不支持:last-child选择器。|3144633|entityMap^0|0|0|7|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You could maybe add

<pre><code>.print:last-child {
 page-break-after: auto;
}
</code></pre>

so the last <code>print</code> element will not get the extra page break.

Do note that the :last-child selector is not supported in IE8, if you're targetting that wretch of a browser.

blocks|key|250141|text|你试过这个吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250142|@media+print+{
++++html,+body+{
++++++++height:+99%25;++++
++++}
}|code-block|syntax|javascript|250143|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Have you tried this?

<pre><code>@media print {
 html, body {
 height: 99%; 
 }
}
</code></pre>

blocks|key|3144655|text|这对我很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144656|.print%2B.print+{
++++page-break-before:+always;
}|code-block|syntax|javascript|3144657|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me 

<pre><code>.print+.print {
 page-break-before: always;
}
</code></pre>

blocks|key|252072|text|为不用于打印的所有其他元素设置display:none。设置visibility:hidden会将它们隐藏起来，但它们都仍然在那里，并为它们占用了空间。空页面是为那些隐藏的元素准备的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|252073|entityMap^0|F|C|U|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

set <code>display:none</code> for all other elements which are not for prints.
setting <code>visibility:hidden</code> will keep them hidden, but they all are still there and have taken space for them. empty page is for those hidden elements.

blocks|key|3144684|text|描述的解决方案here帮助了我(webarchive+link)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3144685|首先，您可以向所有元素添加边框，以查看是什么导致添加新页面(可能是一些页边距、填充等)。|3144686|div+{+border:+1px+solid+black;}|code-block|syntax|javascript|3144687|而解决方案本身就是添加以下样式：|3144688|html,+body+{+height:+auto;+}|3144689|entityMap|0|LINK|mutability|MUTABLE|url|http://notflip.be/?p=304|1|https://web.archive.org/web/20141002023447/http://notflip.be/?p=304^0|7|4|0|G|F|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Solution described <a href="http://notflip.be/?p=304" rel="noreferrer">here</a> helped me (<a href="https://web.archive.org/web/20141002023447/http://notflip.be/?p=304" rel="noreferrer">webarchive link</a>).

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).

<pre><code>div { border: 1px solid black;}
</code></pre>

And the solution itself was to add the following styles:

<pre><code>html, body { height: auto; }
</code></pre>

blocks|key|253561|text|在经历了各种分页符设置和高度以及body标签上一百万种不同的CSS规则之后，我终于在一年后解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|253562|我有一个div，它应该是页面上唯一可以打印的东西，但在它之后，我得到了几个空白页面。我的body标记被设置为visibility:hidden;，但这还不够。垂直高的页面元素仍然占据“空间”。因此，我在打印CSS规则中添加了以下内容：|offset|length|style|CODE|253563|#header,+#menu,+#sidebar{+height:1px;+display:none;}|code-block|syntax|javascript|253564|通过包含高页面布局元素的特定div的ids来定位它们。我缩小了高度，然后将它们从布局中删除。不再有空白页。几年后，我很高兴地告诉我的客户我破解了它。希望这对某些人有帮助。|253565|entityMap^0|0|1I|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

After struggling with various page-break settings and heights and a million various CSS rules on the body tag, I finally solved it over a year later.

I have a div which is supposed to be the only thing on the page which prints, but I was getting several blank pages after it. 

My body tag is set to <code>visibility:hidden;</code> but that wasn't enough. Vertically tall page elements still take up 'space'. So I added this in my print CSS rules:

<pre class="lang-html prettyprint-override"><code>#header, #menu, #sidebar{ height:1px; display:none;}
</code></pre>

to target specific divs by their ids which contain tall page layout elements. I shrunk the height and then removed them from the layout. No more blank pages. Years later I'm happy to tell my client I cracked it. Hope this helps someone.

blocks|key|252113|text|不知道(就目前而言)原因，但这一点很有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252114|+++@media+print+{
++++++++html,+body+{
++++++++++++border:+1px+solid+white;
++++++++++++height:+99%25;
++++++++++++page-break-after:+avoid;
++++++++++++page-break-before:+avoid;
++++++++}
++++}|code-block|syntax|javascript|252115|希望有人能在解决这个问题时保住他的头发……;)|252116|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Don't know (as for now) why, but this one helped:

<pre><code> @media print {
 html, body {
 border: 1px solid white;
 height: 99%;
 page-break-after: avoid;
 page-break-before: avoid;
 }
 }
</code></pre>

Hope someone will save his hair while fighting with the problem... ;)

blocks|key|3144793|text|似乎有很多可能的原因，可能的主题是body标签的高度被认为太大了，这是w/e的原因。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144794|我的目标:在基本样式表中使用min-height:+100%25。|offset|length|style|CODE|3144795|我的解决方案是:在@media+print指令中使用min-height:+auto。|3144796|注意，根据PhpStorm的说法，auto似乎不是一个正确的值。然而，根据Mozilla的documentation+on+min-height，这是正确的|3144797|3144798|自动|blockquote|3144799|3144800|flex项的默认最小大小，为其他布局提供了比0更合理的默认值。|3144801|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/min-height^0|0|E|G|0|9|C|Q|G|0|H|4|19|R|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|L|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1G|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Seems there's a lot of possible causes, with the likely theme being that the body tag ends up with a height that is considered too large for w/e reason.

My cause: <code>min-height: 100%</code> in a base stylesheet.

My solution: <code>min-height: auto</code> in a <code>@media print</code> directive.

Note, <code>auto</code> didn't seem to be a correct value, according to PhpStorm. However, it is correct according to Mozilla's <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height" rel="nofollow">documentation on min-height</a>:

<blockquote>
 auto 
 The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.
</blockquote>

blocks|key|3144805|text|将此css添加到同一页面以扩展css文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144806|<style+type="text/css">
+++
</style>|code-block|syntax|javascript|3144807|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add this css to same page to extend css file.

<pre><code>&lt;style type="text/css"&gt;
 &lt;!--
 html, body {
 height: 95%; 
 margin: 0 0 0 0;
 }
 --&gt;
&lt;/style&gt;
</code></pre>

blocks|key|3144823|text|在我的例子中，将width设置为all+div会有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144824|.page-content+div+{
++++width:+auto+!important;
++++max-width:+99%25;
}|code-block|syntax|javascript|3144825|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In my case setting width to all divs helped: 

<pre><code>.page-content div {
 width: auto !important;
 max-width: 99%;
}
</code></pre>

blocks|key|2930176|text|我尝试了所有的解决方案，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2930177|<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>|code-block|syntax|javascript|2930178|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I tryed all solutions, this works for me:

<pre><code>&lt;style&gt;
 @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;
 }
&lt;/style&gt;
</code></pre>

blocks|key|250278|text|Chrome似乎有一个bug，在某些情况下，隐藏后加载的元素display:none会留下很多额外的空间。我猜他们是在文档渲染完成之前计算文档高度的。Chrome还会触发2个媒体更改事件，并且不支持onbeforeprint等。它们基本上就是打印的ie。以下是我的解决方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250279|@media+print+{
++++body+{
++++++++display:+none;
++++}
}

body.printing+{
++++display:+block;
}|code-block|syntax|javascript|250280|您让body+class=在准备好的文档上“打印”，这就启用了打印样式。该系统允许打印样式的模块化，以及浏览器中的打印预览。|250281|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Chrome seems to have a bug where in certain situations, hiding elements post-load with display:none, leaves a lot of extra space behind. I would guess they are calculating document height before the document is done rendering. Chrome also fires 2 media change events, and doesn't support onbeforeprint, etc. They are basically being the ie of printing. Here's my workaround:

<pre><code>@media print {
 body {
 display: none;
 }
}

body.printing {
 display: block;
}
</code></pre>

You give body class="printing" on doc ready, and that enables the print styles. This system allows for modularization of print styles, and in-browser print preview.

blocks|key|248600|text|我刚刚遇到了一个案例，从|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248601|++++</div>
++++<script+src="addressofjavascriptfile.js"></script>
</body>
</html>|code-block|syntax|javascript|248602|至|248603|++++++++<script+src="addressofjavascriptfile.js"></script>
++++</div>
</body>
</html>|248604|已修复此问题。|248605|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I just encountered a case where changing from

<pre><code> &lt;/div&gt;
 &lt;script src="addressofjavascriptfile.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

to

<pre><code> &lt;script src="addressofjavascriptfile.js"&gt;&lt;/script&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

fixed this problem.

blocks|key|3144924|text|我更改了css显示和打印区域的宽度属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144925|​|3144926|#printArea{
++++display:table;
++++width:100%25;
}|code-block|syntax|javascript|3144927|3144928|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

I changed css display and width property of print area

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#printArea{
 display:table;
 width:100%;
}</code></pre>
</div>
</div>

blocks|key|252205|text|如果这些都不起作用，试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252206|@media+print+{

++++html,+body+{
++++++height:100vh;+
++++++margin:+0+!important;+
++++++padding:+0+!important;
++++++overflow:+hidden;
++++}

}|code-block|syntax|javascript|252207|请确保为100vh|252208|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

if None of those works, try this

<pre><code>@media print {

 html, body {
 height:100vh; 
 margin: 0 !important; 
 padding: 0 !important;
 overflow: hidden;
 }

}
</code></pre>

make sure it is 100vh

blocks|key|2930294|text|没有一个答案对我有效，但在阅读完所有答案后，我发现问题出在我有一个Html页面，我想要打印它，但它打印了一个额外的白色空白页面。我使用AdminLTE作为要打印的报表页面的bootstrap+3主题，并在其中使用我想要将此文本放在页面右下角的脚注标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2930295|某位先生打印的|2930296|blockquote|2930297|2930298|2930299|我使用jquery来放置该文本，而不是之前的"Copy+Rights“页脚|2930300|$("footer").html("Printed+by+Mr.+Someone");|code-block|syntax|javascript|2930301|默认情况下，在主题中，标记脚注使用.main-footer类，该类具有以下属性|2930302|padding:+15px;
border-top:+1px+solid+|2930303|这导致了额外的空格，所以在知道问题之后，我有不同的选择，最好的选择是使用|2930304|$(+"footer"+).removeClass(+"main-footer"+);|2930305|就在该特定页面中|2930306|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|-4|5|E|7|12|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|19|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Z|$]]

None of the answers worked with me, but after reading all of them, I figured out what was the issue in my case 
I have 1 Html page that I want to print but it was printing with it an extra white blank page.
I am using AdminLTE a bootstrap 3 theme for the page of the report to print and in it the footer tag I wanted to place this text to the bottom right of the page:

<blockquote>
 Printed by Mr. Someone
</blockquote>

I used jquery to put that text instead of the previous "Copy Rights" footer with

<pre><code>$("footer").html("Printed by Mr. Someone");
</code></pre>

and by default in the theme the tag footer uses the class .main-footer
which has the attributes

<pre><code>padding: 15px;
border-top: 1px solid 
</code></pre>

that caused an extra white space, so after knowing the issue, I had different options, and the best option was to use 

<pre><code>$( "footer" ).removeClass( "main-footer" );
</code></pre>

Just in that specific page

blocks|key|3145009|text|.print:last-child{
++++page-break-after:+avoid;
++++page-break-inside:+avoid;
++++margin-bottom:+0px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3145010|这对我很有效。|unstyled|3145011|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.print:last-child{
 page-break-after: avoid;
 page-break-inside: avoid;
 margin-bottom: 0px;
}
</code></pre>

This worked for me.

blocks|key|248660|text|奇怪的是，设置透明边框为我解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248661|@media+print+{
++div+{
++++border:+1px+solid+rgba(0,0,0,0)
++}
}|code-block|syntax|javascript|248662|也许在容器元素上设置边界就足够了。<-未测试。|248663|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Strangely setting a transparent border solved this for me:

<pre><code>@media print {
 div {
 border: 1px solid rgba(0,0,0,0)
 }
}
</code></pre>

Maybe it will suffice to set the border on the container element. &lt;- Untestet.

blocks|key|2930366|text|我也有类似的问题，但原因是我在页面底部有40px的页边距，所以即使最后一页有空间，最后一行也总是换行。不是因为任何类型的page-break-*+css命令。我修复了删除打印上的页边距，它工作得很好。只是想添加我的解决方案，以防其他人有类似的东西！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2930367|entityMap^0|1O|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I had a similar issue but the cause was because I had 40px of margin at the bottom of the page, so the very last row would always wrap even if there were room for it on the last page. Not because of any kind of <code>page-break-*</code> css command. I fixed by removing the margin on print and it worked fine. Just wanted to add my solution in case someone else has something similar!

blocks|key|2930393|text|将你需要的东西放在div中的页面上，并在该div上使用page-break-inside:avoid。您的div将停留在一个页面上，并在需要时转到第二个或第三个页面，但是下一个div，如果它必须进行分页，则应该从下一个页面开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2930394|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Put the stuff you need on a page in a div and use page-break-inside:avoid on that div.
Your div will stay on one page and go onto a second or third page if needed, but the next div, should it have to do a page break, should start on the next page.

blocks|key|252246|text|检查底部的html标记后是否有空格。删除下面的空格对我有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252247|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Check if there is any white space after the html tag at the bottom. Remove any whitespace below helped me

blocks|key|248704|text|首先，通过浏览器的devtools模拟打印样式表。说明可以在here中找到。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|248705|然后你会想要寻找额外的填充，边距，边框等，这些可能会使页面的尺寸超过8.5英寸x+11英寸。请特别注意空白，因为这不可能通过打印预览对话框检测到。如果有不应该出现的空格，右键单击并检查光标下的元素应该会突出显示问题(除非是页边距造成的)。|248706|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time^0|U|4|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

First, emulate the print stylesheet via your browser's devtools. Instructions can be found <a href="https://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time">here</a>.
Then you'll want to look for extra padding, margin, borders, etc that could be extending the dimensions of your pages beyond the 8.5in x 11in. Pay special attention to whitespace as this will be impossible to detect via the print preview dialog. If there is whitespace that shouldn't be there, right-clicking and inspecting the element under the cursor should highlight the issue (unless it's a margin causing it).

blocks|key|3145165|text|在我的例子中，额外的页面问题是由页面上的table元素引起的。我尝试了这里提供的许多解决方案，但为了解决这个问题，我必须将表css更改为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3145166|table+{
++++width:+99%25;
++++height:+99%25;
}|code-block|syntax|javascript|3145167|entityMap^0|K|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

The extra page problem in my case was caused by <code>table</code> element on the page. I tried many of the solutions offered here, but to solve the problem I had to change the table css to:
<pre><code>table {
 width: 99%;
 height: 99%;
}
</code></pre>

blocks|key|2930486|text|我还得到了一个额外的下方/上方空间，这取决于我是否使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2930487|page-break-after:+always；或page-break-before:+always；|2930488|我所做的是移除了我应用分页之后或分页之前的元素的高度和边框。|offset|length|style|BOLD|2930489|这帮助我删除了额外的页面。|2930490|例如：|2930491|/*The+element+to+which+we+apply+page+break*/
<div+class="page-break-line"></div>|code-block|syntax|javascript|2930492|内部样式：|2930493|<style>
.page-break-line{
++/**Make+sure+you+don't+give+any+height,border.+Because+giving+them+gives+an+
++extra+page.
++*/
++visibility:+hidden;
+}


+@media+print+{
++/*This+is+the+important+to+add+page+break!*/
++.page-break-line+{
++++page-break-before:+always+!important;
++}
+}
</style>|2930494|注意:在我需要单独打印的每一行下面都有一个带分页线的div。|2930495|entityMap^0|0|0|5|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@$F|13|G|14|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|19|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

I was also getting an extra space below/above depending upon whether I use
page-break-after: always; or page-break-before: always;
What I did was removing the height and border of the element to which I apply
page-break-after or page-break-before.
This helped me in removing that extra page.
Eg:
<pre><code>/*The element to which we apply page break*/
&lt;div class=&quot;page-break-line&quot;&gt;&lt;/div&gt;
</code></pre>
Inside styles:
<pre><code>&lt;style&gt;
.page-break-line{
 /**Make sure you don't give any height,border. Because giving them gives an 
 extra page.
 */
 visibility: hidden;
 }


 @media print {
 /*This is the important to add page break!*/
 .page-break-line {
 page-break-before: always !important;
 }
 }
&lt;/style&gt;
</code></pre>
Note: A div with page-break-line is kept beneath each of my row which I need to print separately.

blocks|key|2930532|text|我在这里的任何答案中都看不到我的解决方案，所以我想这也是我的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2930533|首先，如果你不知道这个技巧，它会有所帮助。您可以使用检查器预览打印页。单击右上角的三个点，然后单击"More+Tools+->+Rendering"，现在导航到Rendering选项卡，您可以模拟CSS+media+type+"Print“。非常有用！|2930534|我采纳了@Michael+Radionovs的建议，为我的所有元素添加了边框。我给html，main，body设置了不同的边框颜色，我注意到我的html和body在最后包围了我不想要的额外页面。|2930535|提供html，body+{+height:+auto；}或html，body+{+height:+99%25；}的技巧对我不起作用，但设置|2930536|html,+body+{+height:+max-content+}+|code-block|syntax|javascript|2930537|对我的一些打印页有效。|2930538|其他似乎会导致问题的东西是应用于容器元素的填充-底部或边距-底部。这将html、body和main标记推到了页面边界之外，并创建了一个新页面。因此，使用以下命令也可以重置这些属性值|2930539|main,+.master,+.content+{+margin:+0;+padding:+0+}|2930540|对我其余的打印页有效。|2930541|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I can't see my solution posted in any answers here, so here is mine as well I guess.
First off, if you don't know of this trick, it helps. You can preview print pages with the inspector. Click the three dots in the top right, then &quot;More Tools -&gt; Rendering&quot;, now navigate to the Rendering tab, and you can emulate the CSS media type &quot;Print&quot;. Very useful!
I took the advice of @Michael Radionovs and added a border to all my elements. I gave html, main, body different border colors and I noticed that my html and body was surrounding my unwanted extra page at the end.
The trick to give html, body { height: auto; } or html, body { height: 99%; } didn't work for me, but setting
<pre><code>html, body { height: max-content } 
</code></pre>
worked for some of my print pages.
Something else that seemed to cause an issue was padding-bottom or margin-bottom being applied to my container elements. This pushed html, body and main tags outside the page bounds and created a new page. So resetting those property values as well with
<pre><code>main, .master, .content { margin: 0; padding: 0 }
</code></pre>
worked for the rest of my print pages.

blocks|key|250440|text|@media+print+{
++++++++.print-page+{
++++++++++++display:+block;
++++++++++++height:900px;
++++++++}
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|250441|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>@media print {
 .print-page {
 display: block;
 height:900px;
 }
 }
</code></pre>

blocks|key|250473|text|在我这种情况下，我给页边距顶部一个div，这会导致空白页打印问题，我删除了那个页边距，问题就消失了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250474|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In my case I'm giving a margin-top a div which causing that issue of blank page printing, I removed that margin and the issue go away.

blocks|key|250476|text|我也得到了额外的空白页，唯一对我起作用的是将这个规则添加到我的css+(用于打印)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250477|*
{
++++box-sizing:+border-box;
}|code-block|syntax|javascript|250478|然后，我不再需要担心在使用边距、填充或边框时添加额外的像素。|250479|一旦我添加了这条规则，我只需要调整盒子的位置，一切都会完美地工作。|250480|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
<pre><code>*
{
 box-sizing: border-box;
}
</code></pre>
Then I no longer need to worry about having an extra pixel added when using margin, padding or border.
Once I've added that rule, I only had to adjust the boxes positions and everything worked flawlessly.

I'm using a CSS property,

If I use <code>page-break-after: always;</code> => It prints an extra blank page before

If I use <code>page-break-before: always;</code> => It prints an extra blank page after. How to avoid this?

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;style type="text/css"&gt;
.print{
 page-break-after: always;

}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
window.print();
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="print"&gt;fd&lt;/div&gt;
&lt;div class="print"&gt;fdfd&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

how to avoid extra blank page at end while printing?

我使用的是CSS属性，如果我使用page-break-after: always; =>，它会打印一个额外的空白页如果我使用page-break-before: always; =>，它会在之后打印额外的空白页。如何避免这种情况？<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 ...

问如何在打印时避免末尾多余的空白页？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在打印时避免末尾多余的空白页？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在打印时避免末尾多余的空白页？
EN