HTML to print pdf CSS - html

Question

I have a simple HTML page that I want to convert to pdf (print mode). I got the Header to repeat in every page but I noticed that the header covers the content in the second page. Any one know how to avoid that?
Note: I am using Bootstrap, but I commented it out so I could use my own styles.
SCSS:
#media print{
header{
position: fixed;
top: 0;
border: none;
}
main{
margin-top: 2cm;
}
footer{
position: fixed;
bottom: 0;
}
#page {
size: auto;
//margin: 6.35mm;
}
}
Fiddle for HTML: https://jsfiddle.net/u1oy0ehj/
Thanks!

Answer 1

#media print executes the code only for the print mode. So anything you include inside this is not affected in the normal browser mode. So you can get rid of the position: fixed; in the header only for print mode so it doesn't behave that way even in the print mode.
Fixed positioning takes an element out of the document flow, so no fiddling the element will work.
JSFiddle updated
If you want the position: fixed then all you can do is push the <main> content down only for print mode.
main{ margin-top: 5cm; } //probably more than what you had given '2cm'
Even this can't help you much because in the second page since you have made your header fixed(its out of the document flow), the overflowing contents will think the header doesn't exist and continue as usual giving you an overlapped effect.

Answer 2

<div id="list${MACRO}TopDivRow" class="row">
<style>
#media print{
body *:not(#list${MACRO}TopDivRow):not(#list${MACRO}TopDivRow *){
visibility: hidden;
}
#list${MACRO}TopDivRow {
visibility : visible;
position: absolute;
left: 0;
top: 0;
}
}
</style>
<button onclick="window.print();">
print
</button>
---------------------Explanation--------------------------------
#media print is useful to print a page.
#list${MACRO}TopDivRow - this is the division id which you want to print.
in the entire body of page, first iam hidding the content which is not belongs to my perticular division.so i have written **visibility : hidden** there. In the second code snippet, iam printing required division, so i have placed **visibility : visible there**.
window.print() - useful to print the content of window.

Answer 3

you can use completely JavaScript to print the particular division in your page.here we are using simple swapping logic between original content and particular division.if you want entire page, pass entire page division id.
<script type="text/javascript">
function printContent() {
var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
list${MACRO}TopDiv - this is your division which you want to print