I'm creating a PDF using Flying Saucer (which dumps out CSS/HTML to iText to a PDF) and I'm trying to use CSS3 to apply an image header and footer to each page.
I'd essentially like to put this div in the top left of each page:
<div id="pageHeader">
<img src="..." width="250" height="25"/>
</div>
My CSS looks somewhat like this:
@page {
size: 8.5in 11in;
margin: 0.5in;
@top-left {
content: "Hello";
}
}
Is there a way for me to put this div in the content?
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)
来源：https://stackoverflow.com/questions/9729461/creating-page-headers-and-footers-using-css-for-print