爲要打印的每個頁面設置頁邊距/填充（html/css）？

我有很多頁面上的內容，我無法控制它在哪裏破壞。我已經在每個頁面上使用position:fixed作爲頁眉/頁腳放置了一些內容，但它與文本重疊。我嘗試用以下兩種方法解決使用邊距和填充的重疊問題。爲要打印的每個頁面設置頁邊距/填充（html/css）？

當我將保證金使用@page

@page { 
    margin: 2cm; 
}

它的工作原理在每一頁上，因爲它說，但我的頁眉和頁腳也取自利潤率遠。

於是，我就加入保證金使用body標籤

body { 
    margin: 2cm; 
    /* padding: 2cm; */ 
}

它的工作的第一頁和最後2釐米頁底部邊緣上加入2釐米上邊距。但不在頁面之間。

是否可以設置邊距/填充每頁？

來源

2017-01-21 user2274195

我不知道我理解的問題，但甲肝你試過這個嗎？ @page {padding：2cm; } – theboy

您的第一個選擇是正確的，您需要做的只是將您的頁眉和頁腳定位爲running。

@page { 
    margin: 2cm; 

    @top-center { 
     content: element(pageHeader); 
    } 

    @bottom-center { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
}

來源

2017-01-21 13:24:25

這是由主流瀏覽器支持嗎？ – Oriol

@page本身似乎並未得到safari的支持：https：//developer.mozilla.org/en-US/docs/Web/CSS/@page –

@page { 
    padding: 2cm; 
    margin: 3cm;  
}

來源

2017-01-21 13:36:15

-1

嘗試......

確保有指定打印樣式表。這可能是一個單獨的樣式表，或者您可以使用引導樣式表：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

或

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

然後，你可以寫你的風格在單獨的樣式表或使用媒體查詢共享一個打印機如：

@media print { 
/* Your styles here */

}

來源

2017-01-21 13:51:21

爲要打印的每個頁面設置頁邊距/填充（html/css）？

回答

相關問題