Google chrome prints extra page

Question

I'm currently in the process of making a website (wordpress) print-friendly using css and on certain pages when printing on A4 it leaves a fully blank last page (see here for an example: http://takana.co.nz/?page_id=25).

When simulating a print using Google Chrome's Developer Tools and the option "Emulate CSS media" I can't find anything that would be adding any more whitespace below the end of the content.

The immediate conclusion is that something's adding whitespace beyond the footer text however I can't inspect element on a printed page to find it.


What is causing the extra page when using print preview on chrome?

Answer 1

Use Following Code in css

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

See The Preview After Adding Css ;

Answer 2

In my case, this fairly heavy-handed solution worked:

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

Basically, you can simply force everything after the first page to be hidden. Obviously you want to be pretty sure that you're not losing anything valuable.

Answer 3

Seems issue is with the padding. Try to adjust padding for .entry-wrap for media print.

May be something like below

@media print {
 .entry-wrap {
   padding: 25px; /* adjust it accordingly */
 }
}

Hope this will help you someway (y).