Html 在所有页面上打印页眉/页脚（打印模式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8356881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print header/footer on all pages (Print Mode)
提问by eozzy
<div id="header">header</div>
<div id="content">
content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>
I want to print #headerand #footeron everypage in print mode. I searched a lot but nothing seems to work, even position:fixeddoesn't work as expected.
我想打印#header和#footer对每个打印模式页。我搜索了很多，但似乎没有任何效果，甚至position:fixed没有按预期工作。
回答by Pat
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead>and <tfoot>elements. They'll print at the top and bottom of every page:
如果您愿意为您的布局切换到表格（不一定是理想的），您可以使用<thead>和<tfoot>元素来完成。它们将打印在每一页的顶部和底部：
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Another option is to use display table-header-groupand table-footer-groupbut cross-browser support isn't great:
另一种选择是使用 display table-header-group，table-footer-group但跨浏览器支持不是很好：
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
回答by Oscar Albert
I think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98). I wrote the div tag before and after the content like this
我想我来得太晚了:)，但我一直在寻找这样的东西，我找到了一个对我有帮助的答案（来源https://www.youtube.com/watch?v=yDgFLysON98）。我在这样的内容前后写了div标签
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
Example:
例子：
<!DOCTYPE html>
<html>
<head>``
<style>
body {
background-color: #CCC;
margin:48px 0px 0px 64px;
}
div#header {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>
... I hope this helps.
... 我希望这有帮助。
回答by Vincent Teyssier
For that you need to use the mso (microsoft office css properties) in your style:
为此，您需要在您的风格中使用 mso（microsoft office css 属性）：
<style><--
@page
{
size:21cm 29.7cmt;
margin:1cm 1cm 1cm 1cm;
mso-title-page:yes;
mso-page-orientation: portrait;
mso-header: header;
mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
回答by Shrey Gupta
Nisse Engstroms answer is correct. You just need to put the thead and tfoot content inside a tr to make it work.And it also is the best method because when you use absolute positioning in a div to make header and footer it will always overlap with your main body content on the next page.
Nisse Engstroms 的回答是正确的。您只需要将 thead 和 tfoot 内容放在 tr 中即可使其工作。这也是最好的方法，因为当您在 div 中使用绝对定位来制作页眉和页脚时，它将始终与您的主体内容重叠下一页。
<table>
<thead>
<tr> !-- these are important
<th id="header"> !--- these are important
!--- content of header here
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
!---- main body here
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="footer">
!----- content of footer here
</th>
</tr>
</tfoot>
</table>
