Saya mempunyai banyak kandungan pada halaman saya tetapi saya tidak mempunyai kawalan ke mana ia pecah. Saya meletakkan beberapa kandungan pada setiap halaman menggunakan position:fixed
sebagai pengepala/pengaki, tetapi ia bertindih dengan teks. Saya cuba menyelesaikan isu bertindih menggunakan margin dan padding dalam dua cara berikut.
Apabila saya menambah margin menggunakan @page
@page { margin: 2cm; }
Seperti yang dikatakan, ia berfungsi pada setiap halaman, tetapi pengepala dan pengaki saya juga hilang dari jidar.
Jadi saya cuba tambah margin menggunakan tag badan
body { margin: 2cm; /* padding: 2cm; */ }
Ia berfungsi dengan menambah margin atas 2cm pada halaman pertama dan margin bawah 2cm pada halaman terakhir. Tetapi tidak antara muka surat.
Adakah mungkin untuk menetapkan margin/padding untuk setiap halaman?
Saya mempunyai masalah yang sama dan selepas banyak mencari saya menemui artikel menarik yang menyediakan penyelesaian gabungan, yang boleh anda baca di sini.
Ringkasnya, ia menggabungkan dua kaedah:
Menggunakan
位置:固定
TeknologiGunakan
thead tbody tfoot
Jika anda hanya menggunakan kaedah pertama, anda akan menghadapi masalah bertindih, begitu juga jika anda hanya menggunakan kaedah kedua, pengaki akan tersekat di bahagian bawah kandungan halaman dan mungkin berakhir pada permulaan halaman terakhir, tetapi dalam kombinasi Ini dua kaedah boleh menyelesaikan masalah.
Di sini anda boleh melihat demo yang berfungsi.
Untuk memastikan penyelesaian ini berfungsi dengan betul, cuba tekan butang
Print Me!
untuk mencetak.Anda mungkin perlu menambah nombor halaman dalam pengaki, ini juga dilakukan oleh CSS, anda hanya perlu menambah CSS berikut:
Dalam beberapa artikel, ia adalah
内容: counter(page) " of " counter(pages);
,但是在我的例子中,pages
terus mengembalikan 0 tanpa sebab, jadi saya mengabaikannya, mungkin anda boleh melaksanakan kiraan untuk mengira jumlah halaman menggunakan CSS var().Untuk makluman, jika anda tidak mahu menonton pengepala dan pengaki sebelum mencetak, anda boleh menambah CSS berikut:
2020 Kemas Kini:
Nombor halaman nampaknya tidak berfungsi lagi.