Css打印-内容分页

Question

我有一个网页，它的内容打印在一个预先打印的收据模板。我面临的问题是模板在每个页面上有三个部分。标头部分有发票号，客户名称等。内容部分，该节以表格行格式填充。此节是动态的，无法预测行数和高度。页脚部分包含金额之和等。

我想保持标题只在第一页，页脚只在底部的最后一页。动态中间部分应根据内容在多个页面中进行拆分和分发。中间页的页眉和页脚部分应在其各自的空间上保持空。

有谁能帮我用html5和css3制作这个结构吗？

Answer 1

你好，这是我的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
@media all {
  .page-break   { display: none; }
}
//make it break the page
@media print {
  .page-break   { display: block; page-break-before: always; }
  #content{
    color:blue;
  }
}
</style>
<header>
  <h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
  <h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
  <h1>FOTTER</h1>
</footer>
</body>
</html>

希望能有所帮助，这里有一个链接。