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