Css 打印 - 内容分页符答案

【问题标题】：Css print - page break on contentCss 打印 - 内容分页符
【发布时间】：2016-09-02 14:44:12
【问题描述】：

我有一个将其内容打印在预先打印的收据模板上的网页。我面临的问题是模板在每个页面上都有三个部分。带有账单编号、客户名称等的标题部分。以表格行格式填充的内容部分。此部分是动态的，无法预测行数和高度。页脚部分包含金额等的总和。

我想只在第一页保留页眉，只在最后一页的底部保留页脚。动态中间部分应该根据内容分解并分布在多个页面中。中间页面的页眉和页脚部分应在其各自的空间上保持空白。

谁能帮我用html5和css3制作这个结构。

【问题讨论】：

【解决方案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>

希望对您有所帮助，如需了解更多信息，请联系 link

【讨论】：