简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk menetapkan margin/padding (HTML/CSS) untuk setiap halaman yang dicetak?
P粉937769356
P粉937769356 2023-10-20 17:34:03
0
1
773

Saya mempunyai banyak kandungan pada halaman saya tetapi saya tidak mempunyai kawalan ke mana ia pecah. Saya meletakkan beberapa kandungan pada setiap halaman menggunakanposition:fixedsebagai 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?

P粉937769356
P粉937769356

membalas semua (1)
P粉996763314
P粉9967633142023-10-21 16:34:32 Tingkat 1

Saya mempunyai masalah yang sama dan selepas banyak mencari saya menemui artikel menarik yang menyediakan penyelesaian gabungan, yang boleh anda bacadi sini.

Ringkasnya, ia menggabungkan dua kaedah:

  1. Menggunakan位置：固定Teknologi

  2. Gunakanthead 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.

.page-header, .page-header-space { height: 100px; } .page-footer, .page-footer-space { height: 50px; } .page-footer { position: fixed; bottom: 0; width: 100%; border-top: 1px solid black; /* for demo */ background: yellow; /* for demo */ } .page-footer:after { counter-increment: page; content: counter(page) } .page-header { position: fixed; top: 0mm; width: 100%; border-bottom: 1px solid black; /* for demo */ background: yellow; /* for demo */ } .page { page-break-after: always; } @page { margin: 20mm } @media print { thead {display: table-header-group;} tfoot {display: table-footer-group;} button {display: none;} body {margin: 0;} }
    

  
 I'm The Header 
  
 
 I'm The Footer, Page # 
 
  
   
 		 
   
   
PAGE 1
 
PAGE 2
 
 PAGE 3 - Long Content 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum. Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum. Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat. Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.

Di sini anda boleh melihatdemoyang berfungsi.

Untuk memastikan penyelesaian ini berfungsi dengan betul, cuba tekan butangPrint Me!untuk mencetak.

Anda mungkin perlu menambahnombor halamandalam pengaki, ini juga dilakukan oleh CSS, anda hanya perlu menambah CSS berikut:

.page-footer:after { counter-increment: page; content: counter(page) }

Dalam beberapaartikel, ia adalah内容: counter(page) " of " counter(pages);，但是在我的例子中，pagesterus 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:

@media screen { .header, .footer { display: none; } }

2020 Kemas Kini:

Nombor halaman nampaknya tidak berfungsi lagi.

Suka+0
Tambah Balasan
    Topik popular
    Lagi>
    Artikel popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！