Geek Answers Handbook

Extra blank page when printing (except IE) - is this my css print?

I use print css to hide certain elements, and also to stop page breaks when I don't want them. User can hide sections before printing.

My problem is that when I print previews, there is always an extra blank page (at the end in Chrome and Firefox, and at the beginning in Opera), and I can’t understand why. IE has no problems, no extra pages (which is shocking ...)

I would really appreciate some material. I tried to make the container div div-break-after: avoid; and page-break-after: auto; but no one worked. Also take out table.plain {page-break-inside: avoid; } irrelevant.

The exclude class is added to the table when the user clicks the hide icon. This works, and anything with the exclude class does not appear in print. The final page that the user wants to print can fit on one page or cannot.

Here is my html:

<body> <div id="main"> <div id="content"> <div id="side" class="exclude"> ...logo, etc, shown at side on screen... </div> <div id="data"> <table class="printOnly plain printHeader"> ...logo, etc, to print at top... </table> <div> <table class="detail plain"> <tbody> <tr> <td class="rel"> <div class="abs exclude visibility"> <a href="#" class="show ico-show ico hid">Show</a> <a href="#" class="hide ico-hide ico">Hide</a> </div> <h3>Contact</h3> </td> </tr> ...more tr with contact details... </tbody> </table> ...more tables with other details... </div> </div> //data </div> //content </div> //main </body>

Here is my print css:

 @media print { .exclude { display: none !important; } .printOnly { display:block !important; } div#data, div#data div { width: 98% !important; border: none !important; } table.plain { page-break-inside:avoid; } }

Many thanks for your help:)

+7
source share
4 answers

In most cases, you specify

 html, body { width: 100%; height: 100%; }

The print driver in your browser does not like this. Therefore, to fix this, simply add this to your print.css file

 html, body { height: auto; }

More blank print on page.

the solution is explained on this page hopes help everyone

+13
source

I will try using CSS reset. Resets are supposed to help different browsers render the website in the same way. You can try one from http://meyerweb.com/eric/tools/css/reset/ , but I never used it, so I can’t say how it will work. You can also try googling for CSS reset specifically for print styles. A.

0
source

For Firefox: if a blank page is displayed when you preview the print, go to print → page setup and zoom out until the space disappears from the preview. It worked for me.

0
source

To solve this problem using a media query instead of a separate print.css, try the following:

 html, body { height: 100%; @media print { /* This fixes an issue where when printing a selection, an extra blank page is printed in IE10 and IE11. Solution found here: http://stackoverflow.com/a/22320644/7752 */ height: auto; } }
0
source

More articles:


All Articles