CSS mise en page d'Impression est l'ajout d'une page supplémentaire

J'ai travaillé sur une page d'impression pour un client. Après avoir joué pendant un certain temps, j'ai trouvé, j'obtiens une page blanche supplémentaire. L'insolite, c'est que si je sélectionne "Contour des Éléments de Niveau Bloc" Développeur Web pour google chrome, la page supplémentaire disparaît. C'est tout le CSS utilisé sur la page dès maintenant:

@page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        height: 296mm;
        border: 1px solid black;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }

.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}

.A4_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 44mm;
    height: 210mm;
    width: 165mm;
 }

J'ai fait beaucoup de recherches sur google mais je ne peux pas voir tout ce qui est lié à ce. Le corps de la frontière montre clairement la div se terminant avant la fin de la première page, cependant j'obtiens toujours une page blanche supplémentaire pour une raison quelconque.

OriginalL'auteur Andre | 2012-11-22

  1. 3

    Pourrait-il être il y a quelque chose d'ajouter seulement 1 pixel quelque part? Puisque vous définir la page à utiliser plein de 270 mm de hauteur. Même une marge/rembourrage/frontière serait ajouter une nouvelle page.

    - T-il encore se produire si vous réduisez cette valeur? Si non, alors je vous suggère de prendre un petit peu de cette valeur (vous n'utilisez pas toute la hauteur de toute façon.) Vous pouvez ajouter page-break: after à .print_A4 pour éviter une prochaine page de prendre le peu d'espace restant sur la page précédente.

    J'ai réduit la hauteur de tout le chemin jusqu'à 260mm, et bien que je ne peux clairement voir tous les divs fin avant le bas de la page, je suis encore en train d'une page supplémentaire. Merci pour la réponse rapide
    Comme une mise à jour, j'ai mis une de 1 pixel de contour blanc autour .print_A4 et il a fixé. C'est assez ghetto et je n'ai aucune idée de pourquoi/comment cela fonctionne, mais qui semblait le faire 🙂
    Aussi eu ce même problème, et la frontière a fonctionné pour moi. Cependant, j'ai ajouté "border: 1px solid transparent", de sorte qu'un perceur de ligne ne sont pas imprimer en toutes circonstances.

    OriginalL'auteur Neograph734

  2. 3

    Vieille question, mais pour les personnes avec le même problème, voici ma solution qu'il fixe pour moi.

    J'ai trouvé que la marge du bas du corps doit être explicitement définie à zéro (Chrome et Safari semblent avoir une marge par défaut).

    body
{
    margin: 0px 0px 0px 0px; 
}

div.page {
  margin: 10px 10px 10px 10px; 
  page-break-before: none;
  page-break-after: none;
  page-break-inside: avoid;
}

    Pour chaque page imprimée commencer avec un <div class="page"> et de définir les marges de page il pour que la page a l'air sympa.

    "aucun" n'est pas dans les valeurs de la "page-break-after" et "page-break-before", vous devez utiliser l'auto

    OriginalL'auteur mewiki

  3. 3

    Vraiment la réponse tardive, mais je pense que mon contribuent peut aider quelqu'un à le même problème, je suis tombé sur la fabrication de l'utilisation de CSS pour une page de configuration pour l'impression:

    la création d'un contenu html dynamique et d'ajouter à l'élément de corps dont le but est d'imprimer uniquement ce contenu, je me rends compte que seul google Chrome (version 46) et Opera (version 32) crée une page blanche au début lors de l'impression, cela s'est produit seulement lorsque le contenu de la hauteur est plus grande que la hauteur de la page.
    La solution fournie par @mewiki résolu moi un 2-jours-de-recherche-et-test de problème.

    En effet, Chrome et Opera semblait avoir des marges par défaut et le réglage de la règle suivante:

    body {
    margin: 0 0 0 0;
}

    résolu le frustrant comportement qui n'a pas été rencontré dans les autres navigateurs.

    OriginalL'auteur wiredolphin