页面和页脚在打印模式下使用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），导致页脚全部放错位置。