Bagaimana untuk Mengelakkan Halaman Kosong Tambahan Apabila Mencetak dengan CSS?-tutorial css-php.cn

Bagaimana untuk Mengelakkan Halaman Kosong Tambahan Apabila Mencetak dengan CSS?

Linda Hamilton

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

asal

651 orang telah melayarinya

How to Avoid Extra Blank Pages When Printing with CSS?

Mengelakkan Halaman Kosong Tambahan Semasa Mencetak dengan CSS

Apabila mencetak kandungan web menggunakan CSS, pengguna mungkin menghadapi isu halaman kosong tambahan sedang ditambah sebelum atau selepas kawasan cetakan yang dimaksudkan. Untuk menangani masalah ini, pertimbangkan pertanyaan media CSS berikut:

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

Salin selepas log masuk

Penjelasan:

Pertanyaan media CSS ini menetapkan sifat ketinggian html dan elemen badan kepada 99% apabila dokumen sedang dicetak. Ini memastikan bahawa kandungan bercetak memenuhi hampir keseluruhan halaman, menghalang penambahan halaman kosong tambahan.

Penggunaan:

Untuk menggunakan penyelesaian ini, tambahkan CSS di atas pertanyaan media kepada dokumen HTML anda di dalam bahagian. Pastikan anda memasukkan peraturan cetakan @media untuk menyatakan bahawa gaya hanya perlu digunakan semasa mencetak dokumen.

Contoh:

Kod HTML berikut menunjukkan penggunaan pertanyaan media CSS:

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

Salin selepas log masuk

Dengan menggunakan penyelesaian ini, anda boleh menghalang pencetakan halaman kosong tambahan semasa menggunakan sifat pemisah halaman CSS.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Halaman Kosong Tambahan Apabila Mencetak dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!