Creating page headers and footers using CSS for print

Putting an element to the top of each page:

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)


To include both header and footer on pages (elaborating on excellent answer from @Adam):

<style>
@page {

    margin: 100px 25px;
    size: letter portrait;

    @top-left {
        content: element(pageHeader);
    }

    @bottom-left {
        content: element(pageFooter);
    }
}

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

</style>
<body>
    <header id="pageHeader">something from above</header>
    <footer id="pageFooter">lurking below</footer>

    <div>meaningful rambling...</div>
</body>

NOTE: In order for footer to repeat on every page it may be necessary to define it BEFORE other body content (for multi-page content)

Tags:

Pdf

Pdf Generation

Css Paged Media

Flying Saucer

Recent Posts