我正在构建要导出为PDF的HTML页面，其打印方式与打印页面相同。我想在每个页面上都具有相同的页眉和页脚，但是无论我如何尝试……都行不通。
我正在测试我在Chrome 34.0.xxx和Safari 7.0.3上都尝试过的一切...都给出相同的结果。
我已经尝试过使用possition: fixed和bottom: 0的top: 0。
我尝试过使用表格：
<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>
我尝试使用：
.header {
display: table-header-group;
}
.body {
display: table-row-group;
}
.footer {
display: table-footer-group;
}
我唯一没有尝试过的就是CSS中的分页选项，因为我不知道html页面内容的高度。
这是（现在）我的HTML页面：
<!DOCTYPE HTML>
<html>
<head>
<title>Report</title>
<style type="text/css">
body, html {
font-family: "Helvetica","Arial";
font-size: 12px;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.body {
width: 100%;
background-color: blue;
margin: 50px 0 50px 0;
}
.header, .footer {
width: 100%;
height: 50px;
position: fixed;
}
.header {
top: 0;
background-color: red;
}
.footer {
bottom: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
This is a header
</div>
<div class="body">
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
</div>
<div class="footer">
This is the footer
</div>
</body>
</html>
结果是我在第一页上获得了“ This is a header”和“ This is footer”，但在以下页面却没有：
如何获得每页上的页脚和页眉？
最佳答案
我最终分叉了BNHtmlPdfKit项目，并添加了对页眉和页脚UIView发送的支持。
在此处检查：https://github.com/ppeelen/BNHtmlPdfKit/
关于html - PDF的每一页上的页眉和页脚div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23634545/