Comment éviter la page vierge supplémentaire en fin d'impression?

Vous pourriez peut-être ajouter

 .print:last-child { page-break-after: auto; } 

De sorte que le dernier élément d' print n'obtiendra pas la rupture de page supplémentaire.

Notez que le sélecteur de dernier enfant n'est pas pris en charge dans IE8, si vous ciblez ce misérable d'un navigateur.

Avez-vous essayé cela?

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

La solution décrite ici m'a aidé ( lien webarchive ).

Tout d'abord, vous pouvez ajouter une bordure à tous les éléments pour voir ce qui fait apparaître une nouvelle page (peut-être quelques marges, paddings, etc.).

 div { border: 1px solid black;} 

Et la solution elle-même était d'ajouter les styles suivants:

 html, body { height: auto; } 

Cela fonctionne pour moi

 .print+.print { page-break-before: always; } 

Si vous voulez simplement utiliser CSS et que vous souhaitez éviter la rupture de page, utilisez

 .print{ page-break-after: avoid; } 

Jetez un oeil aux médias paginés

Vous pouvez utiliser des équivalents de script pour pageBreakBefore et pageBreakAfter, affecter dynamiquement leurs valeurs. Par exemple, au lieu de forcer des sauts de page personnalisés sur vos visiteurs, vous pouvez créer un script pour le rendre facultatif. Ici, je vais créer une case à cocher qui bascule entre la coupe de la page aux en-têtes (h2) et à la discrétion de l'imprimante (par défaut):

 <form name="myform"> <input type="checkbox" name="mybox" onClick="breakeveryheader()"> </form> <script type="text/javascript"> function breakeveryheader(){ var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto" for (i=0; i<document.getElementsByTagName("H2").length; i++) document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle } 

Cliquez ici pour un exemple qui utilise ceci. Vous pouvez remplacer H2 dans le script par une autre étiquette telle que P ou DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Je ne sais pas (pour le moment) pourquoi, mais celui-ci a aidé:

  @media print { html, body { border: 1px solid white; height: 99%; page-break-after: avoid; page-break-before: avoid; } } 

J'espère que quelqu'un sauvera ses cheveux tout en luttant contre le problème …;)

display:none pour tous les autres éléments qui ne sont pas destinés aux impressions. La visibility:hidden les cachera, mais ils sont toujours là et ont pris de l'espace pour eux. La page vide est destinée à ces éléments cachés.

Après avoir lutté avec divers paramètres de la pause de page et des hauteurs et un million de règles CSS différentes sur l'étiquette du corps, je l'ai finalement résolu plus d'un an plus tard.

J'ai un div qui est supposé être la seule chose sur la page qui imprime, mais j'avais plusieurs pages vierges après. Mon étiquette de corps est définie sur la visibility:hidden; Mais cela ne suffisait pas. Les éléments de la page verticalement élevés occupent encore l'espace. J'ai donc ajouté ceci dans mes règles CSS imprimées:

 #header, #menu, #sidebar{ height:1px; display:none;} 

Pour cibler des divs spécifiques par leurs identifiants qui contiennent des éléments de mise en page de haute page. J'ai rétréci la hauteur et les ai retirés de la disposition. Plus de pages vierges. Des années plus tard, je suis heureux de dire à mon client que je l'ai craqué. J'espère que ça aide quelqu'un.

Il semble qu'il y ait beaucoup de causes possibles, le thème probable étant que l'étiquette du corps se retrouve avec une hauteur qui est considérée trop grande pour la raison de w / e.

Ma cause: min-height: 100% dans une feuille de style de base.

Ma solution: min-height: auto dans une directive @media print .

Note, auto ne semble pas être une valeur correcte, selon PhpStorm. Cependant, il est correct selon la documentation de Mozilla sur min-height :

auto
La taille minimale par défaut pour les éléments flex, fournissant un défaut plus raisonnable que 0 pour d'autres mises en page.

Dans ma largeur de réglage de cas à toutes les divs aidé:

 .page-content div { width: auto !important; max-width: 99%; } 

Ajoutez ce css à la même page pour étendre le fichier css.

 <style type="text/css"> <!-- html, body { height: 95%; margin: 0 0 0 0; } --> </style> 

J'ai essayé toutes les solutions, cela fonctionne pour moi:

 <style> @page { size: A4; margin: 1cm; } .print { display: none; } @media print { div.fix-break-print-page { page-break-inside: avoid; } .print { display: block; } } .print:last-child { page-break-after: auto; } </style> 

Chrome semble avoir un bug où dans certaines situations, cacher les éléments post-chargement avec l'affichage: aucun, laisse beaucoup d'espace supplémentaire derrière. Je suppose qu'ils calculent la hauteur du document avant que le document ne soit rendu. Chrome déclenche également 2 événements de changement de média et ne prend pas en charge onbeforeprint, etc. Ils sont en principe l'édition. Voici ma solution de contournement:

 @media print { body { display: none; } } body.printing { display: block; } 

Vous donnez body class = "printing" sur doc ready, et cela permet les styles d'impression. Ce système permet la modularisation des styles d'impression et l'aperçu de l'impression dans le navigateur.