Repeat a footer on each print page using @page

Question

How can I repeat some footer information on each print page using @page?

I don't want to use a fixed position div as suggested in a "duplicate" question.

I've just got a completely standard HTML template with the following in the body:

<div id="main">

    <h1>This is the title</h1>
    <p>And the content</p>

</div>

This is my css:

@media print {

    .page-break {
        page-break-after: always!important;
    }

}

@page {
  size: 7in 9.25in;
  margin: 27mm 16mm 27mm 16mm;
}

@page :left {
  @bottom-left {
    content: "This is a test";
  }
}

At the moment in the latest version of Chrome it's not showing anything in the print preview. Where am I going wrong?

Possible duplicate of [How to use HTML to print header and footer on every printed page of a document with 5 pages?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w) — CBroe, Sep 01 '16 at 10:03
@CBroe I'm trying to utilise `@page` - no solutions on that question use that. Plus, I'm not sure syntax wise if I'm using it correctly. — Rob, Sep 01 '16 at 10:05
Further down the page on that link, is an answer that's received many useful votes, around 250. That looks like the most relevant answer. But I agree with you, that's not a good question to link to, as it has no accepted answer. — Lee, Sep 01 '16 at 10:07
i can't find anything on @bottom-left (or @bottom). do you have a reference for it? (here's 'bottom': https://developer.mozilla.org/en-US/docs/Web/CSS/bottom.) — wazz, Sep 01 '16 at 11:11
@wazz I don't sorry, think that's where it's going wrong. I haven't seen that before to be honest. — Rob, Sep 01 '16 at 12:21

score 1 · Answer 1 · answered Sep 02 '16 at 00:57

i've been playing around with this. seems @page has very limited use. here's what i could get. not what you were hoping for. a positioned div might be best if you can.

@media print {
    .page-break {
        page-break-after: always !important;
    }

    /* this adds the content to the bottom of the first page only.
    div::after {
        content: "This is a test";
        bottom: 0;
        position: absolute;
    } */

    /* this adds the content right beside the div. kind of useless.
    .page-break::after {
        content: "This is a test";
    } */

    /* this adds the content to the bottom of the first page only, 
       but multiple times; once for every page-break class i guess.
    .page-break::after {
        content: "This is a test";
        position: absolute;
        bottom: 0;
    } */
}

It's tricky, I know. The page break isn't always used. Sometimes the content will be naturally running onto the next page. Other times, the user will choose to put a page break in (via Wordpress) if they want the content on the next page. — Rob, Sep 02 '16 at 08:52

Rodger Svovah · Answer 2 · 2016-09-01T14:57:00.237

-1

You can try it like this:

<head>
    <style>
      p { page-break-after: always; }
      .footer{ position: fixed; bottom: 0px; }
      .pagenum:before { content: counter(page); }
    </style>
  </head>
  <body>
    <div class="footer">Page: <span class="pagenum"></span></div>
    <p>lorem ipsum ...</p>
    <p>lorem ipsum ...</p>
  </body>

My example is for page footer but you can do the same with page header by specifying top where I said bottom and of course 'footer' becomes 'header'. You can put both header and footer

edited Sep 01 '16 at 14:57

answered Sep 01 '16 at 14:04

Rodger Svovah

51
1
2

1

With this example would the content of the page run into the footer? So the footer would end up sitting on top of some content? – Rob Sep 02 '16 at 08:49

score -2 · Answer 3 · answered Mar 09 '19 at 18:14

Another option you could try is something I used for a while, you will need to setup a local to view php files (look into wamp for windows and mamp for mac -- linux manually), but if you make a php file just containing your footer or navbar etc you can use the php load function to get it into another page.

//In footer.php
<footer>Footer Stuff</footer>

//In index.php or other pages
<body>
    <div id="whereFooterShouldBe"><?php load('footer.php') ?></div>
</body>

In doing this your file references in your footer.php (css links js tags etc) will need to be file-pathed relative to the file which your are using the php load function in, not the footer.php itself.

Even further this method could be used to load any html from one file into another. This is very useful for rapid development, with my clients I use this method for my footer and navbar so I only have 1 file to change that will result in the correct changes being made across all pages.

Repeat a footer on each print page using @page

3 Answers3