how to avoid extra blank page at end while printing?
CssPrintingCss Problem Overview
I'm using a CSS property,
If I use page-break-after: always; => It prints an extra blank page before
If I use page-break-before: always; => It prints an extra blank page after. How to avoid this?
<!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>
Css Solutions
Solution 1 - Css
Have you tried this?
@media print {
html, body {
height: 99%;
}
}
Solution 2 - Css
You could maybe add
.print:last-child {
page-break-after: auto;
}
so the last print 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.
Solution 3 - Css
Solution described here helped me (webarchive link).
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; }
Solution 4 - Css
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
Solution 5 - Css
This works for me
.print+.print {
page-break-before: always;
}
Solution 6 - Css
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... ;)
Solution 7 - Css
If you just wanna use CSS and wanna avoid page break then use
.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):
<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 here for an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV.
Solution 8 - Css
set display:none for all other elements which are not for prints.
setting visibility:hidden will keep them hidden, but they all are still there and have taken space for them. empty page is for those hidden elements.
Solution 9 - Css
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 page-break-* 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!
Solution 10 - Css
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: min-height: 100% in a base stylesheet.
My solution: min-height: auto in a @media print directive.
Note, auto didn't seem to be a correct value, according to PhpStorm. However, it is correct according to Mozilla's documentation on min-height:
> auto
> The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.
Solution 11 - Css
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:
@media print {
body {
display: none;
}
}
body.printing {
display: block;
}
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.
Solution 12 - Css
I changed css display and width property of print area
#printArea{
display:table;
width:100%;
}
Solution 13 - Css
In my case setting width to all divs helped:
.page-content div {
width: auto !important;
max-width: 99%;
}
Solution 14 - Css
.print:last-child{
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
}
This worked for me.
Solution 15 - Css
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 visibility:hidden; but that wasn't enough. Vertically tall page elements still take up 'space'. So I added this in my print CSS rules:
#header, #menu, #sidebar{ height:1px; display:none;}
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.
Solution 16 - Css
Add this css to same page to extend css file.
<style type="text/css">
<!--
html, body {
height: 95%;
margin: 0 0 0 0;
}
-->
</style>
Solution 17 - Css
I tryed all solutions, this works for me:
<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>
Solution 18 - Css
I just encountered a case where changing from
</div>
<script src="addressofjavascriptfile.js"></script>
</body>
</html>
to
<script src="addressofjavascriptfile.js"></script>
</div>
</body>
</html>
fixed this problem.
Solution 19 - Css
Strangely setting a transparent border solved this for me:
@media print {
div {
border: 1px solid rgba(0,0,0,0)
}
}
Maybe it will suffice to set the border on the container element. <- Untestet.
Solution 20 - Css
First, emulate the print stylesheet via your browser's devtools. Instructions can be found here.
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).
Solution 21 - Css
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:
/*The element to which we apply page break*/
<div class="page-break-line"></div>
Inside styles:
<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>
Note: A div with page-break-line is kept beneath each of my row which I need to print separately.
Solution 22 - Css
I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
*
{
box-sizing: border-box;
}
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.
Solution 23 - Css
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:
> Printed by Mr. Someone
I used jquery to put that text instead of the previous "Copy Rights" footer with
$("footer").html("Printed by Mr. Someone");
and by default in the theme the tag footer uses the class .main-footer which has the attributes
padding: 15px;
border-top: 1px solid
that caused an extra white space, so after knowing the issue, I had different options, and the best option was to use
$( "footer" ).removeClass( "main-footer" );
Just in that specific page
Solution 24 - Css
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.
Solution 25 - Css
Check if there is any white space after the html tag at the bottom. Remove any whitespace below helped me
Solution 26 - Css
The extra page problem in my case was caused by table 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:
table {
width: 99%;
height: 99%;
}
Solution 27 - Css
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 "More Tools -> Rendering", now navigate to the Rendering tab, and you can emulate the CSS media type "Print". 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
html, body { height: max-content }
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
main, .master, .content { margin: 0; padding: 0 }
worked for the rest of my print pages.
Solution 28 - Css
@media print {
.print-page {
display: block;
height:900px;
}
}
Solution 29 - Css
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.