I'm working on Reactive application ,
Functionality to be implemented: Print the content in my page into a PDF document with default header and footer.
Implemented the above functionality using media queries and HTML/CSS,
Issue : The middle content of the page is being hidden behind header and footer.
Code:
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 0px solid black;
background: none;
}
.page-header {
position: fixed;
height: 100px;
top: 0mm;
width: 100%;
border-bottom: 0px solid black;
background: none;
text-align: right;
}
.page {
page-break-after: always;
}
@page {
margin:2mm;
size:A4;
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
Kindly share me inputs to resolve the same in reactive application.
Regards,
Sowndarya