How to set margin between fixed header and footer in print page? - html

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>