Firefox print CSS - Extra blank page on A4 page

8.3k Views Asked by Deviling Master At 21 October 2024 at 04:06

I created a simple print CSS which generates an A4 page.

<!doctype html>
<html>
<head>
<style media="print">
    * {margin:0;padding:0}
    @page {size: 297mm 210mm; margin:0mm;}
    html, body {width: 297mm; height: 210mm}
    html {background-color:red}
    body {background-color:green}
</style>
</head>

<body>
    <p>TEST</p>
</body>
</html>

With Firefox 38.0.1, in the Print Preview window, the body (green colored) has an extra height which triggers a second page firefox

If I print the file, 2 pages are printed, so it is not a problem related only to the print preview.

I already removed all the margins from the Page Setup section and all the extra elements which Firefox adds (like title, url, date, ...)

The same page on Chrome 43.0.2357.81 does not have any problem chrome

How can i solve that?

Original Q&A

There are 1 best solutions below

Julian Xhokaxhiu On 31 May 2015 at 12:00 BEST ANSWER

Use this, it will work straight forward :)

<!doctype html>
<html>
    <head>
        <style>
            @media print {
                * {margin:0;padding:0}
                @page {size: A4 landscape; margin:0mm;}
                html, body {height: 100%;}
                html {background-color:red}
                body {background-color:green}
            }
        </style>
    </head>
    <body>
        <p>TEST</p>
    </body>
</html>

Firefox print CSS - Extra blank page on A4 page

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in PRINT-CSS

Trending Questions

Popular # Hahtags

Popular Questions