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

Question

I have a header div a footer and a content. What I want to do is to print the page so that header and footer display on each page but content displays in between. But the problem is content overlaps or hides under the header and footer. Here's the Example of what I have so far: https://jsfiddle.net/2ogx55p2/

I tried playing with contentDiv's margins and changing position to absolute or relative. but nothing worked out.

A help would be really 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> 

Answer 1

Do it parrent container as a 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>