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

Question

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

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

帮助真的很棒。感谢

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将它作为弹性容器。

* {
  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>