Necesito simular un papel A4 en la web y permitir imprimir esta página como se muestra en el navegador (Chrome, específicamente). Configuré el tamaño del elemento en 21cm x 29.7cm, pero cuando envío para imprimir (o imprimir vista previa) recorta mi página.

¡Mira este ejemplo en vivo !

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>

Creo que me estoy olvidando de algo. ¿Pero qué sería?

• Chrome : página de recorte, página doble ( es justo lo que necesito para que funcione )
• Firefox : funciona perfectamente.
• IE10 : lo creas o no, ¡es perfecto!
• Opera : muy defectuoso en la vista previa de impresión

Investigué esto un poco más y el problema real parece ser la asignación initiala la página widthbajo la printregla de medios. Parece que en Chrome width: initialel .pageelemento da como resultado la escala del contenido de la página si no se define un valor de longitud específico para widthninguno de los elementos principales ( width: initialen este caso se resuelve en width: auto... pero en realidad cualquier valor más pequeño que el tamaño definido en la @pageregla causa el mismo problema).

Entonces, no solo el contenido ahora es demasiado largo para la página (aproximadamente 2cm), sino que también el relleno de la página será un poco más que el inicial 2cmy así sucesivamente (parece reducir el contenido width: autoal ancho ~196mmy luego escalar todo el contenido hasta el ancho de 210mm~ pero extrañamente se aplica exactamente el mismo factor de escala a los contenidos con cualquier ancho menor que 210mm).

Para solucionar este problema, simplemente puede, en la printregla de medios, asignar el ancho y la altura del papel A4 ao html, bodydirectamente .pagey, en este caso, evitar la initialpalabra clave.

MANIFESTACIÓN

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

^{Esto parece mantener todo lo demás como está en su CSS original y solucionar el problema en Chrome (probado en diferentes versiones de Chrome en Windows, OS X y 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>

MANIFESTACIÓN

https://github.com/cognitom/paper-css parece resolver todas mis necesidades.

CSS de papel para una impresión feliz

Solución de impresión frontal: previsualizable y recargable en vivo.