Wie vermeide ich zusätzliche leere Seiten beim Drucken mit CSS?-CSS-Tutorial-php.cn

Wie vermeide ich zusätzliche leere Seiten beim Drucken mit CSS?

Linda Hamilton

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

Original

651 Leute haben es durchsucht

How to Avoid Extra Blank Pages When Printing with CSS?

Vermeiden zusätzlicher leerer Seiten beim Drucken mit CSS

Beim Drucken von Webinhalten mit CSS können Benutzer auf das Problem stoßen, dass eine zusätzliche leere Seite entsteht vor oder nach dem vorgesehenen Druckbereich hinzugefügt werden. Um dieses Problem zu beheben, betrachten Sie die folgende CSS-Medienabfrage:

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

Nach dem Login kopieren

Erklärung:

Diese CSS-Medienabfrage legt die Höheneigenschaft der HTML- und Body-Elemente auf fest 99 %, wenn das Dokument gedruckt wird. Dadurch wird sichergestellt, dass der gedruckte Inhalt fast die gesamte Seite ausfüllt und das Hinzufügen einer zusätzlichen leeren Seite verhindert wird.

Verwendung:

Um diese Lösung zu verwenden, fügen Sie das oben genannte CSS hinzu Medienabfrage an Ihr HTML-Dokument innerhalb des Abschnitt. Stellen Sie sicher, dass Sie die @media-Druckregel einschließen, um anzugeben, dass die Stile nur beim Drucken des Dokuments angewendet werden sollen.

Beispiel:

Der folgende HTML-Code demonstriert die Verwendung der CSS-Medienabfrage:

<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>

Nach dem Login kopieren

Durch die Anwendung dieser Lösung können Sie das Drucken zusätzlicher leerer Seiten verhindern, während Sie CSS-Seitenumbrucheigenschaften verwenden.

Das obige ist der detaillierte Inhalt vonWie vermeide ich zusätzliche leere Seiten beim Drucken mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!