Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengelakkan Halaman Kosong Tambahan Apabila Mencetak dengan CSS?
Bagaimana untuk Mengelakkan Halaman Kosong Tambahan Apabila Mencetak dengan CSS?
- Linda Hamiltonasal
- 2024-10-29 23:38:29702semak imbas
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%;
}
}
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>
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!