With print, how to create a "header" on each page, with the content below the header?

35 Views Asked by At

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?

0

There are 0 best solutions below