Html Question posted in
Some basic documentation can be found here.

Html – Header/Footer on each print Page

Using HTML/CSS, I want to print a header (p.e. logo+company name) / footer (p.e. contact details) on each print page. Using this:

@media print {
      @page {
        margin-top: 3.5cm;
        margin-bottom: 3.5cm;
      }

      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 2.5cm;
      }
  }

I get the header element to appear on each page. But, due to it’s fixed positioning, it overlays the normal contend behind. I do not want to overlay the content. The obvious way to have all content visible seems to add a margin to each @page, but this also moves the footer down.

(Margins from other Elements I tried appear only once, and not on each page.)

Page 1 and 2 with body margin on left; Page 1 and 2 with @page margin on right:
enter image description here

The body margin is only applied on the first page (left). The @page margin also moves the header element (right).

I have tried several tutorials, answers (and comments) but they don’t work (in current Firefox). Also most questions seem to be from 2012.

How do I create a header / footer on each page, without overlapping normal text? (Ideally it should render in FlyingSaucer/OpenPDF)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For future searchers: This answer does work:

    Set margin/padding for each page to print (html/css)?

    It uses table < thead > to free up space on each print page.


  2. 0

    The solution may sound a bit simple, but what you got to do is add a margin in the body element inside the @media print, for example:

    @media print {
      body {
        margin-top: 3.5cm;
        margin-bottom: 3.5cm;
      }

      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 2.5cm;
      }
  }

    This way the fixed content won’t overlay the page content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search