如何在打印页面的固定页眉和页脚之间设置边距？

Question

in my html, Header and Footer are fixed but body content overlaps with header and footer. I want to display my content between header and footer without overlap. How can it be achieved ?

Please help me regarding this.i'm using this CSS code mentioned below. You may check it and resolve this problem.

 <style type="text/css"> @media print { #header { display: table-header-group; position: fixed; top: 0; left: 0; margin: 0px; padding: 0px; width: 100%; } #body { /*position: absolute; height: 80%; margin-top: 0em !important; margin-bottom: 1em !important; padding: 2em 0 0 0; margin:0 auto;*/ position: absolute; margin-top: 10% !important; margin-bottom: 5% !important; height: 80%; overflow: visible; text-align: justify; width: 90%; } #footer { display: table-footer-group; position: fixed; bottom: -0.6em; left: 0; margin: 5em 0px 0px 0px; padding: 0px; width: 100%; /*clear:both;*/ /*padding-top:98%;*/ /*padding-bottom:1em;*/ /*page-break-after: avoid;*/ } } @media screen { #thead { display: block; /*padding-right: 5.9em; padding-left: 6px;*/ width: 100%; /*height: 5%;*/ } #tbody { display: block; /*height: 80%; vertical-align: central; padding-top: 5em; padding-bottom: 3em;*/ text-align: justify; width: 100%; margin-top: -5em; } #tfoot { display: block; /*padding-right: 6em; padding-top: 2em;*/ width: 100%; /*height: 4%;*/ } } </style> 

Answer 1

This snippet shows an example of fixed header and footer (with variable height) and content that takes the remaining space. The trick here is to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 body { overflow: hidden; } .content-container { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } #header { position: relative; width: 100%; background-color: green; } #body { position: relative; width: 100%; background-color: blue; overflow: auto; } #footer { position: relative; width: 100%; background-color: red; } 

 <div class="content-container"> <div id="header"> <div style="height: 40px;"></div> </div> <div id="body"> <div style="height: 1000px;"></div> </div> <div id="footer"> <div style="height: 20px;"></div> </div> </div>