CSS Print Layout - 在單頁上打印

我被卡死了，SO檔案沒有幫助我。也許我在找錯地方。這裏有一個小故事：CSS Print Layout - 在單頁上打印

我有一個觀點，我需要打印在一個完整的頁面上。我不能有第二頁，我需要它在頁面上儘可能大。
解決方案必須具有合理的跨瀏覽器兼容性（IE9 +，Safari，Chrome，FF）。
我已經有一個PDF解決方案，但我也需要一個普通的香草打印解決方案。
該頁面使用Bootstrap構建，但我已覆蓋Print的大部分類。

HTML頁面的結構如下。爲了定製這些信息，我放入了一些內聯CSS。

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

我意識到這是有點可憐的形式，這裏包括在線CSS，但它覆蓋了一堆其他的CSS在它之前出現的各種原因。我可以將它拉出來，但其要點在於此。當我打印時，我看到一些看起來不錯的東西，再加上一個額外的第二頁。當我縮小圖像時，一切正常，但我需要圖像填充DIV。

我認爲將寬度設置爲100％是問題，但我確保圖像縱橫比小於頁面（即使有任何邊距）。基本上，全幅圖像不應該導致分頁。我在做什麼錯&我需要改變什麼？任何幫助表示讚賞...

來源

2011-12-01 Nuby

我認爲一個圖表可能有助於可視化您的問題。我不確定現在到底是什麼問題。 –

我不知道我可以在沒有增加複雜功能的情況下繪製圖表。它是一張8.5「x11」的紙片，裏面有一張圖片。當我將圖像放大到100％寬度時，我無法在沒有創建額外空白頁（在Chrome和FireFox中）的情況下打印它。 – Nuby

嘗試將其設置爲95％。嘗試一些價值，直到它適合在一個頁面上。您也可以嘗試刪除所有邊距和填充（例如'* {padding：0; margin：0}'）。另請注意，瀏覽器會打印頁眉和頁腳，因此可用空間的比例與空白頁面的比率不同。 – Gerben

我認爲對CSS的這個細節感到沮喪的是，答案必須適合我自己的項目。感謝@blahdiblah和其他人的建議。混合的解決方案導致近乎完美的結果，雖然當然IE仍然給我的問題...

它必須做一個硬復位的所有填充/邊距樣式，然後很多!important填充標記，寬度，高度等。基本上我用高度填充頁面，然後放入100％寬的物體。結果是8.5x11頁面的覆蓋範圍最大，零頁溢出到第二頁。

@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;} 
}

來源

2011-12-27 16:37:51 Nuby

這聽起來像你的形象太大了。由於圖像是自定義尺寸，爲什麼不設置

img { height: 100%; }

，而不是width？這至少可以確保它不會溢出到第二頁。

還要記住，打印機比瀏覽器更加變化。您可能能夠在您的打印機上留出每一寸空間，但其他人的打印空間可能會有很大差異，並會毀掉您的所有努力。

來源

2011-12-09 00:03:45 blahdiblah

我試過了。我會重新發布我的最新嘗試。它仍然讓我發瘋，因爲將HTML＆BODY設置爲寬度：100％使它們比頁面更寬。我認爲這很奇怪。身高也做了一些時髦的東西，但也許這是最好的方式去。 – Nuby

CSS Print Layout - 在單頁上打印

回答

相關問題