頁面和頁腳在打印模式下使用css的每個頁面

Question

我有一個web應用程序，它有一個可能超過一頁的報告，我想在每個頁面中打印頁眉和頁腳。 我找到並試試這個： Repeating a report header in each page 但它並沒有爲我工作。我嘗試歌劇，IE9，Firefox，谷歌瀏覽器但...沒什麼。頁邊距工作正常，但內容是我想要的，它不'工作。

Answer 1

您可以設置position: fixed;頁眉和頁腳，以便它會重複每一頁上

對於實例

<header class="onlyprint"><!--Content Goes Here--></header> 
<footer class="onlyprint"><!--Content Goes Here--></footer> 

@media screen { 
    header.onlyprint, footer.onlyprint{ 
     display: none; /* Hide from screen */ 
    } 
} 

@media print { 
    header.onlyprint { 
     position: fixed; /* Display only on print page (each) */ 
     top: 0; /* Because it's header */ 
    } 
    footer.onlyprint { 
     position: fixed; 
     bottom: 0; /* Because it's footer */ 
    } 
} 

Answer 2

我真的很感謝你的回覆，但我已經使用這個解決方案（位置：固定的）前並且頁面的內容將被標題屏蔽。所以我必須使用「@page」，它只適用於「保證金」屬性和「內容」不起作用或換句話說我無法達到我想要的結果。

Answer 3

目前webkit引擎中存在一個缺陷（https://bugs.webkit.org/show_bug.cgi?id=100075），導致頁腳全部放錯位置。