comment éviter la page blanche à la fin lors de l'impression?

Je suis en utilisant une propriété CSS,

Si j'utilise page-break-after: always; => Il imprime une page blanche supplémentaire avant

Si j'utilise page-break-before: always; => Il imprime une page blanche supplémentaire après. Comment l'éviter?

<!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;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
  • quelle est la hauteur de la classe d'impression?
  • Que ce soit pour les factures de la hauteur va être dynamique que par l'absence d'éléments.
  • C'est ainsi que nous l'avons fait dans la guerre froide: <div>This page intentionally left blank.</div>
InformationsquelleAutor Angelin Nadar | 2011-10-21
  1. 62

    Vous pourriez peut-être ajouter

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

    donc le dernier print élément ne sera pas obtenir le plus de saut de page.

    Ne remarque que l' :dernier-sélecteur d'enfant n'est pas pris en charge dans IE8, si vous êtes à cibler qu'misérable d'un navigateur.

    • Son ok comme "n'étant Pas pris en charge dans IE" est le par défaut d'IE
    • Pour les autres lecteurs, cela n'a pas fonctionné pour moi, mais au-dessous de la réponse de réglage automatique de la hauteur sur le HTML et les éléments du corps a fonctionné comme un charme.
    InformationsquelleAutor AKX
  2. 95

    Avez-vous essayé ceci?

    @media print {
    html, body {
        height: 99%;    
    }
}
    • Pour moi travaillé: @media print { html{ height: 99%; } }, avec le corps du document créé était plus grand
    • Dans mon cas, Zurb Foundation a été mise en html et du corps à height: 100%. J'ai été en mesure de remplacer ce avec height: auto
    • Quelqu'un peut m'expliquer pourquoi ce tweak fonctionne?
    • Confirmant que @zacharydl commentaire fonctionne pour moi, et aussi que height: auto; est plus élégante que height: 99%;
    • J'ai eu ce problème, parce que j'ai été la mise html hauteur de 101% pour forcer une barre de défilement pour voir toujours. (Élimine le saut entre les pages) - si oui, à 100% de la hauteur dans le style d'impression est un savoureux fixer! - bravo.
    • pour éviter l'utilisation de 101%, vous pouvez définir overflow-y: scroll; d'avoir toujours la barre de défilement visible
    • Pour moi, il a travaillé avec 98% 🙂

    InformationsquelleAutor giannis.epp
  3. 37

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

    Tout d'abord, vous pouvez ajouter une bordure à tous les éléments pour voir quelles sont les causes d'une nouvelle page ajoutée (peut-être que certaines marges, les rembourrages, etc).

    div { border: 1px solid black;}

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

    html, body { height: auto; }
    • Wow c'était mon ancien blog! J'ai juste eu le même problème, et pensait déjà que je fixe cette fois ^^ le monde est petit
    • plus 1 pour ajouter des div frontière.
    InformationsquelleAutor Michael Radionov
  4. 23

    si Aucune de ces œuvres, essayez cette

    @media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

    assurez-vous qu'il est 100vh

    • réglage de la hauteur de 100vh résolu mon problème. Merci
    • merci, ça a fonctionné pour moi!
    • OK!OK! super très bon!
    • "@media print { * { overflow: hidden!important; } }" est très important pour moi.
    • hmmmm.... toutefois, Si elle a la page suivante. il pas bon... c'était encore garni...
    InformationsquelleAutor Bryan Chan
  5. 8

    Cela fonctionne pour moi 

    .print+.print {
    page-break-before: always;
}
    InformationsquelleAutor Lam
  6. 4

    Ne sais pas (pour l'instant) pourquoi, mais celui-ci m'a aidé:

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

    Espère que quelqu'un va enregistrer ses cheveux tout en luttant contre le problème... 😉

    InformationsquelleAutor Adam G.
  7. 3

    Si vous voulez juste utiliser des CSS et que vous voulez éviter de saut de page, puis utilisez 

    .print{
    page-break-after: avoid;

}

    Prendre un coup d'oeil à paginé de médias

    Vous pouvez utiliser des scripts équivalents pour pageBreakBefore et pageBreakAfter,attribuer dynamiquement leurs valeurs. Par exemple, au lieu de forcer les sauts de page personnalisé de vos visiteurs, vous pouvez créer un script pour faire cette option. Ici, je vais créer une case à cocher qui permet de basculer entre le découpage de la page à l'en-tête (h2) et de l'imprimante discrétion (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 sur ici pour un exemple qui utilise cette. Vous pouvez remplacer H2 à l'intérieur du script avec un autre tag tel un P ou d'un DIV.

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

    InformationsquelleAutor bilash.saha
  8. 3

    ensemble display:none pour tous les autres éléments qui ne sont pas pour les tirages.
    réglage visibility:hidden va les tenir cachés, mais ils sont tous encore là et ont pris place pour eux. page vide, c'est pour ceux d'éléments cachés.

    InformationsquelleAutor Janaka R Rajapaksha
  9. 3

    Dans mon cas, le réglage de la largeur de tous les divs aidé: 

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

    J'ai changé css display et la largeur de la propriété de la zone d'impression

    CSS:

    #printArea{
    display:table;
    width:100%;
}

    InformationsquelleAutor Afshin Razaghi
  11. 2

    Après avoir lutté avec les différents saut de page des paramètres et des hauteurs, et un million de différentes règles CSS sur la balise body, j'ai finalement résolu à plus d'un an plus tard.

    J'ai un div qui est censé être la seule chose sur la page qui s'imprime, mais j'ai été faire plusieurs pages vierges après elle.

    Mon corps balise est définie à visibility:hidden; mais ce n'était pas assez. Verticalement de haut de page les éléments occupent toujours de "l'espace". J'ai donc ajouté ceci dans mon impression règles CSS:

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

    cibler des divs par leur id qui contiennent haut de la page éléments de mise en page. J'ai diminué la hauteur et ensuite retirés de la mise en page. Pas plus de pages vierges. Des années plus tard, je suis heureux de dire à mon client, j'ai craqué. Espérons que cela aide quelqu'un.

    • Oui si vous utilisez visibility: hidden; il va encore prendre de la place. Si vous utilisez display: none; l'espace sera supprimé. À ce stade, vous n'aurez pas besoin de configurer la hauteur, juste pour info.
    InformationsquelleAutor Sherri
  12. 2

    Semble qu'il y a beaucoup de causes possibles, avec la probable thème que le corps de la balise se termine avec une hauteur trop grande pour le w/e raison.

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

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

    Note, auto ne semble pas être une valeur correcte, selon PhpStorm. Cependant, il est correct d'après Mozilla la documentation sur le min-height:

    auto

    Par défaut la taille minimale pour le flex, fournir à un plus raisonnable par défaut de 0 pour les autres mises en page.

    • Je viens de mettre " min-height:initial !important; " et il a travaillé pour moi.
    • - Je éviter les !déclaration importante, si possible. Cela rend les choses plus difficile pour annuler les propriétés. Je n'ai même pas envisager de initial depuis que j'ai supposé qu'il serait problématique pour dynamiquement la taille des éléments. Notez que la valeur initiale est 0, j'ai donc toujours supposer que auto est généralement plus utile.
    InformationsquelleAutor George Marian
  13. 1

    Ajouter cette css à la même page pour étendre fichier css.

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

    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>
    InformationsquelleAutor Paulo Weverton
  15. 1

    Chrome semble avoir un bug où, dans certaines situations, en masquant les éléments de la post-charge avec un display:none, laisse beaucoup d'espace supplémentaire derrière. Je dirais qu'ils sont le calcul de la hauteur avant que le document est en fait le rendu. Google Chrome est également 2 feux des médias les événements de changement, et ne prend pas en charge onbeforeprint, etc. Ils sont essentiellement l'ie de l'impression. Voici ma solution:

    @media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

    Vous donner le corps class="impression" sur la doc prêt, et qui permet de styles d'impression. Ce système permet la modularisation de styles d'impression, et dans le navigateur de prévisualisation d'impression.

    InformationsquelleAutor Dirigible
  16. 1

    Je viens de rencontré un cas où la modification de

        </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

    à

            <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

    corrigé ce problème.

    InformationsquelleAutor Terry Horner
  17. 1
    .print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

    Cela a fonctionné pour moi.

    InformationsquelleAutor guest
  18. 1

    J'ai eu un problème similaire, mais la cause était parce que j'avais 40px de marge au bas de la page, de sorte que la dernière ligne serait toujours envelopper même si il y avait de la place sur la dernière page. Non pas parce que de toute sorte de page-break-* css commande. Je fixe par retrait de la marge de l'impression et il a bien fonctionné. Je voulais juste rajouter ma solution au cas où quelqu'un d'autre a quelque chose de similaire!

    InformationsquelleAutor AlexMorley-Finch
  19. 0

    Aucune des réponses ont travaillé avec moi, mais après la lecture de tous les d'eux, j'ai compris quel était le problème dans mon cas
    J'ai 1 page Html que je veux imprimer, mais il a l'impression d'une page vierge extra blanc.
    Je suis à l'aide de AdminLTE un bootstrap 3 thème pour la page de l'impression du rapport et dans le pied de page de la balise, je voulais placer ce texte en bas à droite de la page:

    Imprimé par M. Quelqu'un

    J'ai utilisé jquery pour mettre ce texte au lieu de la précédente "Droits de Copie" un pied de page avec

    $("footer").html("Printed by Mr. Someone");

    et par défaut dans le thème de la balise footer utilise la classe .main-pied
    qui a les attributs

    padding: 15px;
border-top: 1px solid

    qui a causé un espace blanc supplémentaire, donc après avoir pris connaissance de la question, j'avais différentes options, et la meilleure option est d'utiliser 

    $( "footer" ).removeClass( "main-footer" );

    Dans cette page spécifique

    InformationsquelleAutor Yousef Al-Hadhrami
  20. 0

    Étrangement définition d'une bordure transparente résolu ce problème pour moi:

    @media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

    Peut-être que ça suffira à la frontière sur l'élément conteneur. <- Untestet.

    InformationsquelleAutor Dr Hund
  21. 0

    Mettre les trucs dont vous avez besoin sur une page dans un div et de l'utilisation de la page-break-inside:éviter à la div.
    Votre div restera sur une seule page et aller sur un deuxième ou troisième page, si nécessaire, mais la prochaine div, devrait-il avoir à faire un saut de page, devrait commencer à la page suivante.

    InformationsquelleAutor Rick Turner