html - How to make a header/footer and content for print so that header/footer repeat at each page -

i have header div footer , content. want print page header , footer display on each page content displays in between. problem content overlaps or hides under header , footer. here's example of have far: https://jsfiddle.net/2ogx55p2/

i tried playing contentdiv's margins , changing position absolute or relative. nothing worked out.

a nice. thanks

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

do parrent container 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>