@media print div：如何解決頁眉上的重疊頁面文本？

當在Firefox中打印頁面中的屏幕時，我正在使用@media在每個頁面上打印標題。我有我的CSS設置像這樣：@media print div：如何解決頁眉上的重疊頁面文本？

@media print { 
    div.printDivHeader { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.0em; 
    position: fixed; 
    display: block; 
    width: 100%; 
    height: auto; 
    top: 0; 
    } 
}

問題是第二頁的內容與打印div標題重疊。（即，在第二頁上，標題不強制頁面內容下降，因此我將文本寫在文本上）。有什麼辦法可以解決這個問題嗎？

來源

2011-11-02 MTR

我們需要的是第二個頁面的HTML和CSS，感謝 – GregM

順便說一句，我不知道你是知道但Firefox的最新版本具有打印預覽功能。沒有這個，就必須打印成PDF或打印到紙張......這兩個繁瑣的選項。 – ANeves

position: fixed;不會推動靜態（或相對）內容。要麼有造型，以確保它們不重疊...或重疊。
請參閱this example JSFiddle，它使用您的CSS。

問題出在別的地方。
標題如何不與第一頁中的文本重疊？你有什麼推動文本？邊距？什麼？

是否可以共享原始或簡化的示例？（您可以使用JSFiddle）。

來源

2011-11-02 14:15:31 ANeves

問題是如果我不使用位置：固定標題不會出現在每個頁面 – MTR

（您是否意味着發表評論到@Augus的答案？）是的，我明白了。從我的角度來看，問題是：推動第一頁的內容下降，而不是其他頁面的內容;那東西不是標題;因此沒有改變標題會有幫助，我們應該看看還有什麼效果。 – ANeves

在第一頁上有一個H2元素，在頂部有足夠的填充符，重疊不會發生。此外，看起來，當我這樣做：@media print {div; printDivHeader {0} {font-family：Arial，Helvetica，sans-serif; font-size：1。0EM; 職位：固定; display：block; 寬度：100％; 身高：自動; top：0; } @page { margin：1cm; margin-top：5cm; } }/*所有頁邊距都設置爲2cm */ ...對於第一頁（頁邊距如預期）可以正常工作，但不適用於後續頁面。 – MTR

嗯，我認爲你應該使用

position:relative

，而不是

position:fixed

來源

2011-11-02 14:23:04 Augus

添加到您的頭媒體的規則：爲了bottom:3em;修改3EM的內容以適應。

然後一個單獨的DIV選擇將規則添加爲您的內容區域：

div.printDivContent { 
    position: relative; 
    width: 100%; 
    top:3em; //match size of header 
    left:0px; 
    right:0px; 
}

來源

2014-03-06 03:19:59 guest

CSS的關鍵「框裝飾斷」設置爲「克隆」時會有所幫助。請參閱：CSS Fragmentation

您可以創建一個在你的內容與保證金頂部和底部的頁眉和頁腳大小的容器類，然後設置箱裝飾斷到這個容器上的「克隆」。

#content { 
    box-decoration-break: clone; 
    margin-bottom: 90px; 
}

來源

2016-12-04 01:19:33 Floaz

@media print div：如何解決頁眉上的重疊頁面文本？

回答

相關問題