Menu
I have html & css used to build my iText flying-saucer page set up like the following...
<html>
<head>
<style type="text/css">
body { padding: 5px; }
.footer {
position: running(footer);
font-size: 11px;
text-align: center;
}
@page {
@bottom-center {
content: element(footer)
}
}
.pagenumber:before {
content: counter(page)
}
.pagecount:before {
content: counter(pages)
}
</style>
</head>
<body>
<div class="content">
lots of content that spans multiple pages in here...
</div>
<div class="footer">
Page <span class="pagenumber"></span> of <span class="pagecount"></span>
</div>
</body>
</html>
Why is the footer only displaying on the last page?
392
You can do that by putting a Section Break (Menu Bar > Insert > Break... > Section Break Next Page) at the end of the page prior to the last page of the document. Make sure the last page's footer is Unlinked from the prior page's footer. You do that from the Header and Footer contextual ribbon tab in the Options Group.
So if you put the footer div at the end of the HTML, it will only appear on the last page. It also works if you want a footer on each page, with a different content for the last page. You just have to define the footer div twice in the HTML.
When the "content" was small enough to fit on 1 page, the footer would display fine on that page. Once "content" spanned multiple pages, the footer would only display on the last page.
Turns out that I needed to place the footer BEFORE the content in order for it to be displayed on every page...
<div class="footer">
Page <span class="pagenumber"></span> of <span class="pagecount"></span>
</div>
<div class="content">
lots of content that spans multiple pages in here...
</div>
Looks like it's the same deal if headers are involved...they should be before page content.
Some links related to this (the last one being an example of proper format of html/css):
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With