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>

希望有所帮助，这里有更多信息 link

Css打印 - 内容分页符

1 个答案:

你好，这是我的解决方案