我有一个web应用程序,它有一个报告,可能超过一页,我想打印页眉和页脚在每一页。我发现并尝试了这个:在每页中重复报告标题但这对我不起作用。我试过opera,IE9,Firefox,Google Chrome,但是…什么都没有。页边距工作正常,但内容是我想要的,它不起作用
您可以设置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 */
}
}
我真的很感谢你的回复,但我以前使用过这个解决方案(位置:固定),页面的内容将被标题掩盖。所以我必须使用"@page",这只适用于"Margin"属性和"Content"不工作,或者换句话说,我无法达到我想要的结果。
目前webkit引擎(https://bugs.webkit.org/show_bug.cgi?id=100075)有一个bug,会导致页脚完全错位。
我找到了一个适合我的解决方案,而且只有一个没有问题的解决方案。
In html
<table>
<thead><tr><td>
<div class="header-space"> </div>
</td></tr></thead>
<tbody><tr><td>
<div id="pageHost" class="content"></div>
</td></tr></tbody>
<tfoot><tr><td>
<div class="footer-space"> </div>
</td></tr></tfoot>
</table>
<header id="pageHeader">
</header>
<footer id="pageFooter">
Custom Footer
<div class="numberOfPages">
</div>
</footer>
header, .header-space,
footer, .footer-space {
height: 100px;
font-weight: bold;
width: 100%;
padding: 10pt;
margin: 10pt 0;
}
header {
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
footer {
position: fixed;
bottom: 0;
border-top: 1px solid black;
}