J'ai besoin de simuler un papier A4 sur le Web et de permettre d'imprimer cette page telle qu'elle est affichée sur le navigateur (Chrome, en particulier). J'ai défini la taille de l'élément sur 21 cm x 29,7 cm, mais lorsque j'envoie pour imprimer (ou prévisualiser), il coupe ma page.

Voir cet exemple en direct !

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

Je pense que j'oublie quelque chose. Mais que serait-ce?

• Chrome : page de découpage, double page ( c'est juste ce dont j'ai besoin pour fonctionner )
• Firefox : cela fonctionne parfaitement.
• IE10 : croyez-le ou non, c'est parfait!
• Opera : très buggé sur l'aperçu avant impression

J'ai examiné cela un peu plus et le problème réel semble être lié initialà l' attribution à la page widthsous la printrègle des médias. Il semble que dans Chrome width: initial, l' .pageélément entraîne une mise à l' échelle du contenu de la page si aucune valeur de longueur spécifique n'est définie pour l' widthun des éléments parents ( width: initialdans ce cas, résout en width: auto... mais en fait toute valeur inférieure à la taille définie par la @pagerègle cause le même problème).

Ainsi, non seulement le contenu est maintenant trop long pour la page (par environ 2cm), mais aussi le remplissage de la page sera légèrement supérieur à celui initial 2cmet ainsi de suite (il semble rendre le contenu sous width: autola largeur de ~196mm, puis mettre à l'échelle tout le contenu jusqu'à la largeur de 210mm~ mais étrangement exactement le même facteur d'échelle est appliqué au contenu avec une largeur inférieure à 210mm).

Pour résoudre ce problème, vous pouvez simplement dans la printrègle de support attribuer la largeur et la hauteur du papier A4 au html, bodyou directement au .pageet dans ce cas éviter le initialmot clé.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{Cela semble garder tout le reste tel qu'il est dans votre CSS d'origine et résoudre le problème dans Chrome (testé dans différentes versions de Chrome sous Windows, OS X et Ubuntu).}

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO

https://github.com/cognitom/paper-css semble résoudre tous mes besoins.

Papier CSS pour une impression heureuse

Solution d'impression frontale - prévisualisable et rechargeable en direct!