Why Are Extra Blank Pages Appearing When I Print My HTML Document?

How to Prevent Extra Blank Pages During Printing

When printing HTML documents, you may encounter an issue where an extra blank page appears either before or after the intended content. This can be frustrating and waste valuable paper. To resolve this issue, we present a solution that involves CSS media queries and page height adjustments. Let's delve into the details:

In your provided HTML code, you're using the CSS property page-break-after: always; to force a page break after each .print div. However, this approach can result in an extra blank page being printed at the beginning or end of the document.

To avoid this, consider using a media query to target the print stylesheet. Here's how you can implement this:

<code class="css">@media print {
    html, body {
        height: 99%;    
    }
}</code>

In this media query, we set the height of the html and body elements to 99%. This ensures that the content is spread across multiple pages if necessary, preventing an empty page from being generated at the end.

By adjusting the height of the page, we can control the amount of space available for printing. This prevents extra blank pages from being added unnecessarily, resulting in efficient and paper-saving printing.

The above is the detailed content of Why Are Extra Blank Pages Appearing When I Print My HTML Document?. For more information, please follow other related articles on the PHP Chinese website!