Clever Geek Handbook

Firefox print CSS - extra blank page on A4 page

I created a simple printable CSS that creates 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>

As of Firefox 38.0.1, in the preview window, the body (green) has an extra height that launches the second page firefox

If I print the file 2 pages are printed, so this is not a print preview only issue. In the meantime, there is no need to worry about it.

I've already removed all the fields from the Page Setup section and all the additional elements that Firefox adds (like title, URL, date, ...)

Same page in Chrome 43.0.2357.81 no problem chrome

How can I solve this?

+3


source to share


1 answer


Use this, it will work directly :)



<!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>
+6


source






More articles:


All Articles