I want to figure out how to emulate a Microsoft Word header when printing, where it shows up on every page at the top, with the page content below that. So far I have it showing up on each page with this:
.div_header {
position: fixed;
top: 0;
width: 100%;
}
The problem is this overlays the top portion of the content. To fix that, I added a margin on the body element:
body {
margin-top: 100px;
}
This works for the first page, but the problem re-emerges on subsequent pages I think because the top margin of the body starts at the first page only.
So I tried to use the @page rule to add a margin:
@page {
margin-top: 100px;
}
But this margin now applies to both the content and the "header", so it doesn't help me. I tried this:
@page {
body {
margin-top: 100px;
}
}
But I don't think @page works the same as classes/elements so this isn't working either.
How can I achieve this?