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 header in each page but it didn't work for me.I try opera,IE9,Firefox,Google Chrome but ... nothing.page-margin works fine but content is what I want and it doesn't work.

Answer 1

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

For Example

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

@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 */
    }
}

Answer 2

I really appreciate your reply but i have used this solution(position : fixed) before and the content of the page would be masked by the header. so i have to use "@page" which only works with "Margin" property and "Content" does not work or in other words i cannot reach the result i want.