how to avoid extra blank page at end while printing?

Question

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>

As this is for invoices the height is going to be dynamic as per the no of items. — Angelin Nadar, Oct 21 '11 at 07:51
This is how we did it in the cold war: `
This page intentionally left blank.
` — Bob Stein, Feb 05 '18 at 19:30

score 111 · Answer 1 · answered Oct 22 '13 at 23:02

111

Have you tried this?

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

answered Oct 22 '13 at 23:02

giannis.epp

1,399
1
10
9

2

For me worked: @media print { html{ height: 99%; } }, with body the document created was bigger – Gustavo Feb 17 '14 at 09:33
11

In my case, [Zurb Foundation](http://foundation.zurb.com/) was setting html and body to `height: 100%`. I was able to override this with `height: auto` – zacharydl Oct 18 '14 at 03:03
6

Confirming that @zacharydl's comment works for me, and also that `height: auto;` is more elegant than `height: 99%;` – jontsai Oct 06 '15 at 15:22
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. – rob_james Jun 30 '16 at 13:11
@rob_james to avoid using 101%, you can set overflow-y: scroll; to always have the scrollbar visible – user161592 Aug 17 '16 at 15:20
1

Still working to this day! – Kim Skogsmo Nov 04 '21 at 10:02

score 81 · Accepted Answer · answered Oct 21 '11 at 09:11

81

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.

answered Oct 21 '11 at 09:11

AKX

123,782
12
99
138

97

Its ok as "Not supported in IE" is the dafault feature of IE – Angelin Nadar Oct 21 '11 at 09:54
2

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. – Cody Nov 27 '18 at 15:00

Michael Radionov · Answer 3 · 2015-09-17T19:43:16.433

53

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; }

edited Sep 17 '15 at 19:43

answered Jun 19 '14 at 10:16

Michael Radionov

12,270
1
51
70

10

Wow this was my old blog! I just had the same problem and was thinking I already fixed this once ^^ small world – Miguel Stevens Jan 11 '16 at 10:03
4

plus 1 for adding div border. – Iftikhar Ali Ansari Jun 16 '17 at 15:27
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! – erichunt Jan 10 '20 at 21:16

score 44 · Answer 4 · answered Jan 05 '18 at 14:20

44

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

answered Jan 05 '18 at 14:20

Bryan Chan

441
4
2

6

setting the height to 100vh solved my problem. Thanks – user2398069 Aug 11 '18 at 15:43
1

"@media print { * { overflow: hidden!important; } }" is very important for me. – shinriyo Dec 12 '18 at 03:42
1

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! – pop Mar 04 '20 at 16:06
2

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 – Filipe Jul 10 '20 at 18:53
thanks bro u save my day :+1: – anztrax Nov 10 '21 at 19:12

score 9 · Answer 5 · answered Apr 14 '14 at 08:36

9

This works for me

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

answered Apr 14 '14 at 08:36

Lam

410
6
11

This worked for me better than the rest! Some more info here: http://blog.jonesed.net/2012/10/how-to-remove-trailing-blank-pages-when-setting-up-printable-html/ – RemarkLima Nov 17 '14 at 18:26

score 7 · Answer 6 · answered Aug 12 '16 at 10:25

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

score 5 · Answer 7 · answered May 13 '14 at 09:57

5

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.

answered May 13 '14 at 09:57

Janaka R Rajapaksha

3,298
1
24
28

1

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; }` – Putzi San Dec 30 '20 at 07:42

score 5 · Answer 8 · answered Mar 08 '19 at 13:36

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!

score 5 · Answer 9 · answered Oct 21 '11 at 08:02

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.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

George Marian · Answer 10 · 2016-09-07T19:18:44.423

4

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.

edited Sep 07 '16 at 19:18

answered Sep 01 '16 at 17:41

George Marian

2,623
18
21

I just put 'min-height:initial !important;' and it worked for me. – Siby Thomas Sep 07 '16 at 09:51
@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. – George Marian Sep 07 '16 at 19:21

score 4 · Answer 11 · answered Jul 19 '17 at 18:46

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.

This fixed my problem. I was printing an IMG and setting the style to "display: block;" prevented the second blank page. — kyletme, Jan 12 '21 at 23:51

score 4 · Answer 12 · answered Dec 17 '17 at 04:10

4

I changed css display and width property of print area

#printArea{
    display:table;
    width:100%;
}

answered Dec 17 '17 at 04:10

Afshin Razaghi

370
3
8

Marjanus · Answer 13 · 2017-04-05T07:59:13.540

3

In my case setting width to all divs helped:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

edited Apr 05 '17 at 07:59

answered Apr 05 '17 at 07:51

Marjanus

31
2

score 3 · Answer 14 · edited Oct 29 '18 at 12:33

3

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

This worked for me.

edited Oct 29 '18 at 12:33

Suraj Rao

28,850
10
94
99

answered Oct 29 '18 at 12:23

guest

31
1

score 2 · Answer 15 · answered Feb 10 '15 at 03:05

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.

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. — chapeljuice, Nov 22 '16 at 23:01

score 1 · Answer 16 · answered Feb 18 '17 at 16:15

1

Add this css to same page to extend css file.

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

answered Feb 18 '17 at 16:15

Mansour Alnasser

3,367
4
30
46

score 1 · Answer 17 · answered May 09 '17 at 17:10

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>

score 1 · Answer 18 · answered Nov 23 '17 at 13:33

1

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.

answered Nov 23 '17 at 13:33

Terry Horner

477
5
16

score 1 · Answer 19 · answered Feb 04 '19 at 13:45

1

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.

answered Feb 04 '19 at 13:45

alexloehr

1,578
1
16
16

score 1 · Answer 20 · answered Nov 23 '20 at 14:44

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

score 1 · Answer 21 · answered May 26 '21 at 04:56

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.

score 1 · Answer 22 · answered Sep 09 '21 at 22:32

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.

score 0 · Answer 23 · answered Sep 02 '18 at 15:15

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

score 0 · Answer 24 · answered Sep 26 '19 at 20:52

0

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.

answered Sep 26 '19 at 20:52

Rick Turner

1

score 0 · Answer 25 · answered Nov 13 '19 at 02:59

0

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

answered Nov 13 '19 at 02:59

Wahsei

249
2
5
14

score 0 · Answer 26 · answered Jan 22 '21 at 15:13

0

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%;
}

answered Jan 22 '21 at 15:13

JessieinAg

175
1
9

Kim Skogsmo · Answer 27 · 2021-06-17T12:15:38.800

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.

score 0 · Answer 28 · answered Aug 05 '21 at 10:34

0

@media print {
        .print-page {
            display: block;
            height:900px;
        }
    }

answered Aug 05 '21 at 10:34

Abhishek Kanrar

342
2
5

set the page height – Abhishek Kanrar Aug 05 '21 at 10:35

score 0 · Answer 29 · answered Aug 24 '21 at 07:54

0

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.

answered Aug 24 '21 at 07:54

habib

805
9
27

how to avoid extra blank page at end while printing?

29 Answers29

Linked