how to avoid extra blank page at end while printing?

css printing

171,932

Solution 1

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 2

Have you tried this?

@media print {
    html, body {
        height: 99%;    
    }
}

Solution 3

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

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

This works for me

.print+.print {
    page-break-before: always;
}

View more solutions

171,932

Angelin Nadar

Everybody knows that something cant be done and then somebody turns up and he doesn't know that it can't be done and he does it.

Updated on September 10, 2021

Comments

Angelin Nadar almost 3 years
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>
```
- juankysmith over 12 years
  
  what's the height of the print class?
- Angelin Nadar over 12 years
  
  As this is for invoices the height is going to be dynamic as per the no of items.
- Bob Stein over 6 years
  
  This is how we did it in the cold war: <div>This page intentionally left blank.</div>
Angelin Nadar over 12 years

Its ok as "Not supported in IE" is the dafault feature of IE
Gustavo over 10 years

For me worked: @media print { html{ height: 99%; } }, with body the document created was bigger
zacharydl over 9 years

In my case, Zurb Foundation was setting html and body to height: 100%. I was able to override this with height: auto
RemarkLima over 9 years

This worked for me better than the rest! Some more info here: blog.jonesed.net/2012/10/…
jontsai over 8 years

Confirming that @zacharydl's comment works for me, and also that height: auto; is more elegant than height: 99%;
Miguel Stevens over 8 years

Wow this was my old blog! I just had the same problem and was thinking I already fixed this once ^^ small world
rob_james about 8 years

I had this issue, because i was setting html height to 101% to force a scrollbar to always show. (Eliminates the jump between pages) - so yes, 100% height in the print style is a tasty fix! - cheers.
user161592 almost 8 years

@rob_james to avoid using 101%, you can set overflow-y: scroll; to always have the scrollbar visible
Siby Thomas almost 8 years

I just put 'min-height:initial !important;' and it worked for me.
George Marian almost 8 years

@SibyThomas I avoid the !important declaration if at all possible. It makes things more difficult for overriding properties. I didn't even consider initial since I assumed it'd be problematic for dynamically sized elements. Note that the initial value is 0, so I still assume that auto is generally more useful.
chapeljuice over 7 years

Yes if you use visibility: hidden; it will still take up space. If you use display: none; the space will be removed. At that point you won't need to specifically set the height, just FYI.
Iftikhar Ali Ansari about 7 years

plus 1 for adding div border.
user2398069 almost 6 years

setting the height to 100vh solved my problem. Thanks
Cody over 5 years

For other readers, this didn't work for me, but the below answer of setting auto height on the HTML and body elements worked like a charm.
shinriyo over 5 years

"@media print { * { overflow: hidden!important; } }" is very important for me.
erichunt over 4 years

Adding the border was such a great idea!! It helped me realize there was a min-height set on my page wrapper that was causing an extra page to appear. I was banging my head against this for a while. Thank you so much!
pop over 4 years

Finally an answer to an obscure problem! Safari on OSX was showing a completely blank page while Chrome, FF and Edge where all good with the preview. Thanks a lot!
Filipe almost 4 years

Having the height set to 100vh seems to be keeping it from loading any more than one page, so that if the document has more than one page only the first page loads on the preview
Putzi San over 3 years

Thx, if you have dynamic content you can use the :not selector to set everything to display: none but not the print-class, like body > :not(.print) { display: none !important; }
kyletme over 3 years

This fixed my problem. I was printing an IMG and setting the style to "display: block;" prevented the second blank page.
Abhishek Kanrar almost 3 years

set the page height
Kim Skogsmo over 2 years

Still working to this day!
anztrax over 2 years

thanks bro u save my day :+1: