Layout di stampa CSS - Stampa su una singola pagina

Question

Sono bloccato e gli archivi SO non mi aiutano. Forse sto guardando nel posto sbagliato. Ecco la breve storia:

• Ho una vista che ho bisogno di stampare su una singola pagina intera. Non posso avere una seconda pagina e ho bisogno che sia la più grande possibile sulla pagina.
• La soluzione deve essere ragionevolmente compatibile con browser diversi (IE9 +, Safari, Chrome, FF).
• Ho già una soluzione PDF, ma ho bisogno anche di una semplice soluzione di stampa vaniglia.
• La pagina è stata creata con Bootstrap, ma ho sovrascritto la maggior parte delle classi per Stampa.

La struttura della pagina HTML è la seguente. Ho inserito alcuni CSS in linea per personalizzare alcune di queste informazioni.

<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> 

Mi rendo conto che è un po 'scarsa forma per includere CSS in linea qui, ma deve sostituire un mucchio di altre CSS che è venuto prima che per vari motivi. Potrei tirarlo indietro, ma il succo è questo. Quando stampo, ottengo qualcosa che sembra giusto, più una seconda pagina in più. Quando rimpicciolgo l'immagine, tutto va bene, ma ho bisogno dell'immagine per riempire il DIV.

Ho pensato che la larghezza di impostazione al 100% fosse il problema, ma mi sono assicurato che le proporzioni dell'immagine fossero più piccole della pagina (anche con eventuali margini). Fondamentalmente, l'immagine a tutta larghezza non dovrebbe causare un'interruzione di pagina. Cosa sto facendo male & cosa devo cambiare? Qualsiasi aiuto è apprezzato ...

Answer 1

Penso che la frustrazione con questo dettaglio del CSS sia che la risposta deve essere adattata al mio progetto. Grazie a @blahdiblah e altri per suggerimenti. Un mix di soluzioni ha portato a risultati quasi perfetti, anche se ovviamente IE mi dà ancora problemi ...

Ha avuto a che fare con un hard reset di tutti gli stili padding/margin e quindi molti marcatori !important per riempimento, larghezza , altezza, ecc. Fondamentalmente ho riempito la pagina di altezza e poi ho lasciato cadere oggetti larghi al 100%. Il risultato è la massima copertura su una pagina 8.5x11 con zero spillover su una seconda pagina.

@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

Sembra che la tua immagine sia troppo grande. Dal momento che l'immagine è di formato personalizzato, perché non impostare

img { height: 100%; } 

invece di width? Ciò assicurerebbe almeno che non si riversasse su una seconda pagina.

Tenere presente anche che le stampanti sono più variabili dei browser. Potresti riuscire a liberare ogni centimetro di spazio sulla tua stampante, ma quelli di qualcun altro potrebbero avere margini di stampa significativamente diversi e rovinare tutto il tuo duro lavoro.