Home >Web Front-end >CSS Tutorial >How to Avoid Extra Blank Pages When Printing with CSS?
How to Avoid Extra Blank Pages When Printing with CSS?
- Linda HamiltonOriginal
- 2024-10-29 23:38:29655browse
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%;
}
}
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>
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!