Wie man eine Kopfzeile/Fußzeile und Inhalt für den Druck, so dass die Kopf-/Fußzeile auf jeder Seite wiederholen

Question

Ich habe eine Kopfzeile div eine Fußzeile und einen Inhalt. Ich möchte die Seite so drucken, dass die Kopf- und Fußzeile auf jeder Seite angezeigt wird, aber der Inhalt dazwischen angezeigt wird. Aber das Problem ist Inhalt überlappt oder versteckt sich unter der Kopf- und Fußzeile. Hier ist das Beispiel von dem, was ich bisher habe: https://jsfiddle.net/2ogx55p2/

Ich habe versucht, mit contentDiv Margen zu spielen und die Position auf absolut oder relativ zu ändern. aber nichts hat geklappt.

Eine Hilfe wäre wirklich nett. Dank

.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

Do it parrent Behälter als 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>