header and footer in each page in print mode with css

Question

I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report head

Answer 1

You can set a position: fixed; header and footers so that it will repeat on each page

For Example

@media screen {
    header.onlyprint, footer.onlyprint{
        display: none; /* Hide from screen */
    }
}

@media print {
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}