简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment définir les marges/remplissages (HTML/CSS) pour chaque page imprimée ?
P粉937769356
P粉937769356 2023-10-20 17:34:03
0
1
745

J'ai beaucoup de contenu sur ma page, mais je n'ai aucun contrôle sur l'endroit où il se termine. Je mets du contenu sur chaque page en utilisantposition:fixedcomme en-tête/pied de page, mais il chevauche le texte. J'ai essayé de résoudre le problème de chevauchement en utilisant les marges et le remplissage des deux manières suivantes.

Quand j'ajoute une marge en utilisant @page

@page { margin: 2cm; }

Comme il est dit, cela fonctionne sur chaque page, mais mon en-tête et mon pied de page disparaissent également des marges.

J'ai donc essayé d'ajouter une marge en utilisant la balise body

body { margin: 2cm; /* padding: 2cm; */ }

Cela fonctionne en ajoutant une marge supérieure de 2 cm sur la première page et une marge inférieure de 2 cm sur la dernière page. Mais pas entre les pages.

Est-il possible de définir une marge/un remplissage pour chaque page ?

P粉937769356
P粉937769356

répondre à tous (1)
P粉996763314
P粉9967633142023-10-21 16:34:32 1 plancher

J'ai eu exactement le même problème et après de nombreuses recherches, j'ai trouvé un article intéressant qui propose une solution combinée, que vous pouvez lireici.

En bref, il combine deux méthodes :

  1. Utilisation de la位置：固定Technologie

  2. Utilisationthead tbody tfoot

Si vous utilisez uniquement la première méthode, vous serez confronté à des problèmes de chevauchement. De même, si vous utilisez uniquement la deuxième méthode, le pied de page sera bloqué au bas du contenu de la page et pourra se retrouver au début de la dernière page, mais en combinaison. deux méthodes peuvent résoudre le problème.

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

Ici, vous pouvez voir unedémofonctionnelle.

Pour vous assurer que cette solution fonctionne correctement, essayez d'appuyer sur le boutonPrint Me!pour imprimer.

Vous devrez peut-être même ajouter unnuméro de pagedans le pied de page, cela se fait également par CSS, il vous suffit d'ajouter le CSS suivant :

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

Dans certainsarticles, c'était内容: counter(page) " of " counter(pages);，但是在我的例子中，pagescontinuez à renvoyer 0 sans raison, donc je l'ai ignoré, vous pouvez peut-être implémenter le nombre pour calculer le nombre total de pages en utilisant CSS var().

Pour mémoire, si vous ne souhaitez pas regarder l'en-tête et le pied de page avant l'impression, vous pouvez ajouter le CSS suivant :

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

Mise à jour 2020 :

Les numéros de page ne semblent plus fonctionner.

Comme+0
Ajouter une réponse
    Sujets populaires
    Plus>
    Articles populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！