CSS Yazdırma Düzeni - Tek Sayfada Yazdırma

Question

Kötü bir şekilde sıkışıp kaldım ve SO arşivleri bana yardım etmiyor. Belki yanlış yere bakıyorum. İşte bu kısa hikaye:

• Tek bir tam sayfaya yazdırılmam gerektiğini düşünüyorum. İkinci bir sayfama sahip olamam ve sayfanın mümkün olduğu kadar büyük olmasına ihtiyacım var. Çözüm, çapraz tarayıcı uyumlu (IE9 +, Safari, Chrome, FF) olmak zorundadır.
• Zaten bir PDF çözümüm var, ancak ben de düz bir vanilya baskı çözümüne ihtiyacım var.
• Sayfa, Bootstrap ile oluşturulmuştur, ancak Yazdırma için sınıfların çoğunu geçersiz kıldım.

HTML sayfasının yapısı aşağıdaki gibidir. Bu bilgilerin bazılarını özelleştirmek için bazı çevrimiçi CSS'ye girdim.

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

Buranın in-line CSS dahil etmek biraz zayıf formu olduğunun farkındayım, ama çeşitli nedenlerle daha önce gelen diğer CSS bir demet geçersiz kılmak için vardır. Geri çekebilirdim ama bunun özü bu. Yazdırdığımda, doğru görünen bir şey ve ek bir ikinci sayfa elde ediyorum. Görüntüyü küçülttüğümde, her şey yolunda, ama DIV'yi doldurmak için resme ihtiyacım var.

Genişliği% 100 olarak ayarlamanın sorun olduğunu düşündüm, ancak görüntü en boy oranının sayfadan daha küçük olduğundan emin oldum (her kenarda olsa bile). Temel olarak, görüntü tam genişlikte bir sayfa aralığına neden olmamalıdır. Neyi yanlış yapıyorum & Neyi değiştirmem gerekiyor? Herhangi bir yardım için teşekkür ederiz ...

Answer 1

Bence CSS'nin bu detayındaki hayal kırıklığı, cevabın kendi projeme uyarlanması gerektiğidir. Öneriler için blahdiblah ve diğer teşekkürler. Çözümlerin bir karışımı, elbette IE'ye hala mükemmel bir sonuç verir, ancak yine de ... IE

Tüm doldurma/kenar boşluğu stilleri için bir sıfırlama ve daha sonra dolgu için genişlik için !important işaretleyicileri ile yapmak zorundaydı , yükseklik, vb. Temel olarak sayfayı yüksekliğe kadar doldurdum ve sonra% 100 geniş nesnelere düştüm. Sonuç, bir ikinci sayfaya sıfır yayılma ile 8,5x11 sayfanın maksimum kapsamıdır.

@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

Görüntünüzün çok büyük olduğu anlaşılıyor. Görüntü Özel boyutlu olduğu için, neden olmasın

img { height: 100%; } 

yerine width kurdu? Bu, en azından ikinci bir sayfaya yayılmadığından emin olur.

Ayrıca yazıcıların tarayıcılardan daha değişken olduğunu unutmayın. Yazıcınızdaki her son alanın dışına çıkabilirsiniz, ancak başkalarının baskı marjları önemli ölçüde farklı olabilir ve tüm zor işlerinizi mahvedebilir.