CODEWITHSUNDEEP
htmlcssgoogle-chrome
HexaCubist
HexaCubist

Reputation: 135

Google chrome prints extra page

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?

Upvotes: 9

Views: 10197

Answers (4)

Steve Bennett
Steve Bennett

Reputation: 126145

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.

Upvotes: 3

pradeep1991singh
pradeep1991singh

Reputation: 8365

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

Upvotes: 2

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

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 ;

enter image description here

Upvotes: 11

user7289382
user7289382

Reputation:

I try to print and it was one page, you can try add print break after- before avoid on i.e footer

@media print {
    footer {page-break-after: avoid;}
}

Upvotes: 2

Related Questions