Diseño de impresión CSS - Imprimir en una sola página

Question

Estoy muy atascado y los archivos SO no me ayudan. Tal vez estoy buscando en el lugar equivocado. Aquí está la historia corta:

• Tengo la visión de que debo imprimirme en una sola página completa. No puedo tener una segunda página y necesito que sea lo más grande posible en la página.
• La solución debe ser razonablemente compatible con varios navegadores (IE9 +, Safari, Chrome, FF).
• Ya tengo una solución de PDF, pero también necesito una solución de impresión estándar de vanilla.
• La página está construida con Bootstrap, pero he anulado la mayoría de las clases para Print.

La estructura de la página HTML es la siguiente. Solté algunos CSS en línea para personalizar parte de esta información.

<div class="container"> 
    <div class="row"> 
    <div class="span16"> 

     <style type="text/css" media="all"> 
     @media print { 
      html, body { 
      margin: 0; 
      padding: 0; 
      background: #FFF; 
      font-size: 9.5pt; 
      } 
      .container, .container div { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      .template { overflow: hidden; } 
      img { width: 100%; } 
     } 
     </style> 

     <div class="template_holder"> 
     <div class="template"> 
      <img src="some_big_image"> 
      <div> 
      [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE] 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

que darse cuenta de que es un poco la falta de forma para incluir CSS en línea aquí, pero tiene que anular un montón de otras CSS que había antes de él por varias razones. Podría volver a sacarlo, pero la esencia es esto. Cuando imprimo, obtengo algo que se ve bien, más una segunda página adicional. Cuando reduzco la imagen, todo está bien, pero necesito la imagen para llenar el DIV.

Pensé que establecer el ancho al 100% era el problema, pero me aseguré de que la relación de aspecto de la imagen fuera menor que la página (incluso con cualquier margen). Básicamente, la imagen a todo lo ancho no debería causar un salto de página. ¿Qué estoy haciendo mal? & ¿Qué debo cambiar? Se agradece cualquier ayuda ...

Answer 1

Creo que la frustración con este detalle de CSS es que la respuesta debe adaptarse a mi propio proyecto. Gracias a @blahdiblah y otros por sus sugerencias. Una combinación de soluciones llevó a resultados casi perfectos, aunque, por supuesto, IE todavía me da problemas ...

Tiene que ver con un restablecimiento completo de todos los estilos de relleno/margen y muchos marcadores !important para relleno, ancho , altura, etc. Básicamente llené la página con altura y luego la dejé caer en objetos del 100% de ancho. El resultado es una cobertura máxima en una página de 8.5x11 con cero derrames en una segunda página.

@media print { 
    * { margin: 0 !important; padding: 0 !important; } 
    #controls, .footer, .footerarea{ display: none; } 
    html, body { 
    /*changing width to 100% causes huge overflow and wrap*/ 
    height:100%; 
    overflow: hidden; 
    background: #FFF; 
    font-size: 9.5pt; 
    } 

    .template { width: auto; left:0; top:0; } 
    img { width:100%; } 
    li { margin: 0 0 10px 20px !important;} 
} 

Answer 2

Parece que su imagen es demasiado grande. Dado que la imagen es de tamaño personalizado, por qué no establecer

img { height: 100%; } 

en lugar de width? Eso al menos garantizaría que no se extendiera a una segunda página.

Tenga en cuenta también que las impresoras son más variables que los navegadores. Es posible que pueda obtener hasta el último centímetro de espacio en su impresora, pero el de otra persona puede tener márgenes de impresión significativamente diferentes y arruinar todo su trabajo duro.