如何制作页眉/页脚和打印内容，以便在每一页重复页眉/页脚

Question

我有一个页眉 div 一个页脚和一个内容。 我想要做的是打印页面，以便在每个页面上显示页眉和页脚，但内容显示在它们之间。 但问题是内容重叠或隐藏在页眉和页脚下。 这是我到目前为止的示例：https://jsfiddle.net/2ogx55p2/

我尝试使用 contentDiv 的边距并将位置更改为绝对或相对。但没有任何结果。

帮助会非常好。谢谢

.headerDiv {
  width: 100%;
  background-color: cadetblue;
  height: 100px;
}
.contentDiv {} .reportFooter {
  bottom: 0px;
  width: 100%;
  background-color: gray;
  display: block;
  height: 100px;
}
@media print {
  .headerDiv {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: cadetblue;
    height: 100px;
  }
  .contentDiv {
    z-index: 100;
  }
  .reportFooter {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: gray;
    display: block;
    height: 100px;
  }
}

<header class="headerDiv"></header>
<div class="contentDiv">
  <h1>1 test Test TEst TESt TEST</h1>
  <h1>2 test Test TEst TESt TEST</h1>
  <h1>3 test Test TEst TESt TEST</h1>
  <h1>4 test Test TEst TESt TEST</h1>
  <h1>5 test Test TEst TESt TEST</h1>
  <h1>6 test Test TEst TESt TEST</h1>
  <h1>7 test Test TEst TESt TEST</h1>
  <h1>8 test Test TEst TESt TEST</h1>
  <h1>9 test Test TEst TESt TEST</h1>
  <h1>12 test Test TEst TESt TEST</h1>
  <h1>13 test Test TEst TESt TEST</h1>
  <h1>14 test Test TEst TESt TEST</h1>
  <h1>15 test Test TEst TESt TEST</h1>
  <h1>16 test Test TEst TESt TEST</h1>
  <h1>17 test Test TEst TESt TEST</h1>
  <h1>18 test Test TEst TESt TEST</h1>
  <h1>19 test Test TEst TESt TEST</h1>
  <h1>20 test Test TEst TESt TEST</h1>
  <h1>21 test Test TEst TESt TEST</h1>
  <h1>22 test Test TEst TESt TEST</h1>
  <h1>23 test Test TEst TESt TEST</h1>
  <h1>24 test Test TEst TESt TEST</h1>
  <h1>25 test Test TEst TESt TEST</h1>
  <h1>26 test Test TEst TESt TEST</h1>
</div>
<footer class="reportFooter"></footer>

Answer 1

把它作为一个 flex 的父容器。

* {
  margin: 0;
  padding: 0;
  border: none;
}
.headerDiv,
.contentDiv,
.reportFooter {
  width: 100%;
}
.headerDiv {
  background-color: cadetblue;
}
.reportFooter {
  background-color: gray;
}
body {
  display: flex;
  flex-direction: column;
}
.headerDiv,
.reportFooter {
  flex: 0 0 100px;
}
.contentDiv {
  flex: 1000 0;
  min-height: calc(100vh - 200px);
}

<header class="headerDiv"></header>
<div class="contentDiv">
  <h1>1 test Test TEst TESt TEST</h1>
  <h1>2 test Test TEst TESt TEST</h1>
  <h1>3 test Test TEst TESt TEST</h1>
  <h1>4 test Test TEst TESt TEST</h1>
  <h1>5 test Test TEst TESt TEST</h1>
  <h1>6 test Test TEst TESt TEST</h1>
  <h1>7 test Test TEst TESt TEST</h1>
  <h1>8 test Test TEst TESt TEST</h1>
  <h1>9 test Test TEst TESt TEST</h1>
  <h1>12 test Test TEst TESt TEST</h1>
  <h1>13 test Test TEst TESt TEST</h1>
  <h1>14 test Test TEst TESt TEST</h1>
  <h1>15 test Test TEst TESt TEST</h1>
  <h1>16 test Test TEst TESt TEST</h1>
  <h1>17 test Test TEst TESt TEST</h1>
  <h1>18 test Test TEst TESt TEST</h1>
  <h1>19 test Test TEst TESt TEST</h1>
  <h1>20 test Test TEst TESt TEST</h1>
  <h1>21 test Test TEst TESt TEST</h1>
  <h1>22 test Test TEst TESt TEST</h1>
  <h1>23 test Test TEst TESt TEST</h1>
  <h1>24 test Test TEst TESt TEST</h1>
  <h1>25 test Test TEst TESt TEST</h1>
  <h1>26 test Test TEst TESt TEST</h1>
</div>
<footer class="reportFooter"></footer>