CSS打印佈局添加額外頁面

我一直在爲客戶端打印頁面。玩了一段時間後，我發現我得到一個額外的空白頁面。不尋常的事情是，如果我在Web Developer中爲Chrome瀏覽器選擇「Outline Block Level Elements」，多餘的頁面將消失。這是該網頁上所使用的所有的CSS現在：CSS打印佈局添加額外頁面

@page 
    { 
     size: auto; /* auto is the initial value */ 
     margin: 0mm; /* this affects the margin in the printer settings */ 
    } 

    body 
    { 
     background-color:#FFFFFF; 
     height: 296mm; 
     border: 1px solid black; 
     margin: 0px; /* this affects the margin on the content before sending to printer */ 
    } 

.print_A4 { 
margin: 0mm; 
padding: 0mm; 
height: 270mm; /*A4 Size*/ 
width: 210mm; /*A4 Size*/ 
} 

.A4_content { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 44mm; 
    height: 210mm; 
    width: 165mm; 
}

我已經做了很多谷歌搜索，但我看不到與此相關的任何東西。 body邊框清楚地顯示了div在第一頁結束之前結束的情況，但由於某些原因，我仍然得到一個額外的空白頁面。

來源

2012-11-22 Andre

難道有什麼東西只能在某處添加1個像素嗎？由於您將頁面定義爲使用完整的270毫米高度。即使一個邊距/填充/邊框會添加一個新頁面。

如果減少此值，它還會發生嗎？如果不是，那麼我建議你稍微偏離這個值（不管怎麼樣，你並沒有使用完整的高度）。你可以添加page-break: after到.print_A4，以防止下一頁佔用上一頁剩餘的空間。

來源

2012-11-22 12:13:40 Neograph734

我將高度一直降低到260毫米，儘管我可以清楚地看到頁面底部之前的所有div終止方式，但我仍然得到一個額外的頁面。感謝您的快速回復 – Andre

作爲更新，我在.print_A4周圍放置了一個1像素的白色邊框，並對其進行了修復。這是相當貧民窟，我不知道爲什麼/它如何工作，但似乎這樣做:) – Andre

也有這個相同的問題，併爲我工作的邊界。但是我添加了「border：1px solid transparent」，這樣在任何情況下鑽孔線都不會打印。 – user995551

老問題，但對於這裏有同樣問題的人是我的解決方案，爲我解決它。

我發現身體的邊緣底部必須明確設置爲零（Chrome和Safari似乎有一個默認邊距）。

body 
{ 
    margin: 0px 0px 0px 0px; 
} 

div.page { 
    margin: 10px 10px 10px 10px; 
    page-break-before: none; 
    page-break-after: none; 
    page-break-inside: avoid; 
}

對於每個要打印的頁面開始用<div class="page">並設置頁邊距有這樣的頁面看起來不錯。

來源

2014-07-30 10:18:49 mewiki

'none'不在「page-break-after」和「page-break-before」的允許值中，您應該使用auto – Tofandel

真的晚了答案，但我想我的貢獻可以幫助別人與我對面利用CSS的設置頁面進行打印出來的同一個問題：

創建動態HTML內容，並將它附加到body元素目的只是打印這樣的內容，我意識到只有Chrome（版本46）和Opera（版本32）在打印時在開始時創建額外的空白頁面，這隻發生在內容高度大於頁面高度時。 @mewiki提供的解決方案解決了我2天的研究和測試問題。

事實上，Chrome和Opera似乎有默認邊距和設置以下規則：

body { 
    margin: 0 0 0 0; 
}

解決了沒有在其他瀏覽器中遇到的令人沮喪的行爲。

來源

2015-11-04 16:56:52 wiredolphin

CSS打印佈局添加額外頁面

回答

相關問題