How to Avoid Extra Blank Pages When Printing with CSS?-CSS Tutorial-php.cn

How to Avoid Extra Blank Pages When Printing with CSS?

Linda Hamilton

Release： 2024-10-29 23:38:29

Original

660 people have browsed it

How to Avoid Extra Blank Pages When Printing with CSS?

Avoiding Extra Blank Pages While Printing with CSS

When printing web content using CSS, users may encounter the issue of an extra blank page being added before or after the intended print area. To address this problem, consider the following CSS media query:

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

Copy after login

Explanation:

This CSS media query sets the height property of the html and body elements to 99% when the document is being printed. This ensures that the printed content fills almost the entire page, preventing the addition of an extra blank page.

Usage:

To use this solution, add the above CSS media query to your HTML document inside the section. Make sure to include the @media print rule to specify that the styles should only be applied when printing the document.

Example:

The following HTML code demonstrates the usage of the CSS media query:

<code class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .print {
            page-break-after: always;
        }

        @media print {
            html, body {
                height: 99%;
            }
        }
    </style>
    <script type="text/javascript">
        window.print();
    </script>
</head>
<body>
    <div class="print">fd</div>
    <div class="print">fdfd</div>
</body>
</html></code>

Copy after login

By applying this solution, you can prevent the printing of extra blank pages while using CSS page break properties.

The above is the detailed content of How to Avoid Extra Blank Pages When Printing with CSS?. For more information, please follow other related articles on the PHP Chinese website!