Forum How do I...?

dynamic height headers/footers


Is it possible to have the height of the top and bottom margins be dynamic, i.e. determined by the height of the content within them? In my application the content of the header/footer is variable.

If I use this CSS:

@page {
margin-left: 32pt;
margin-right: 32pt;
@top { content: flow(header); }
@bottom {content: flow(footer); }
{flow: static(header); display:block; height:auto;}
{flow: static(footer); display:block; height:auto;} 

I get a top and bottom margin of about an inch and the header/footer content that doesn’t fit is truncated. If I set a height for the top and bottom margins that space is allocated even if the header/footer content are one line resulting in a lot of wasted space on the page. And if the content exceeds the specified height the content is truncated. Ideally I’d like the height of the header/footer to reflect the height of the content being placed in them.

Is it possible to do this?

Thank you.

At the moment no, the height of the page top/bottom margin can't be determined by the content that is displayed there. One workaround if your document has only a few pages is to use "float: top" and "float: bottom" to float the content to the top and bottom of the page box instead of the page margins. This can't create repeating headers/footers though. Another option is to put the content inside a table and use <thead> and <tfoot> elements to create a table header/footer, as these will be repeated on each page.
Thank you, Mike. The thead/tfoot workaround looks like it will work for us.

Sorry to bump an old thread, but is this still the recommended solution for variable height headers/footers?

It seem to be a bit of a hack to nest the entire document content in a table, just so that we can have variable height headers and footers. Not to mention that nested tables are horrible.
Unfortunately this is still the case, either using page floats (which don't repeat) or tables. CSS will need some extensions to support variable height page margin boxes.
This seems like a case of trying to stick to the css standard, rather than solving real life issues. Perhaps I am wrong...

Is it possible to get page floats to repeat on each page?
Not yet, we'll push this up the roadmap.
We are using the float: bottom; as you suggested to place a footer at the bottom for each document (not bottom of every page) included in the PDFs we generate using version 7.2 devel. We need to support dynamic header and footer heights, because we allow our clients to include their logos and custom text.

This solution works except in the case where the last page of the document fills up most of the page. When the footer is applied to the page the content overlaps. Any suggestions on how to solve this problem? I'd be happy to e-mail a sample.
Yes, please email me a sample document (, and I'll take a look.
Is this still the recommended practice to get variable height, repeating footers? If so, is there a published roadmap for a more palatable solution?
Not yet, sorry. It will require devising some new CSS mechanics.
Does the recent release of Prince 11 do anything to help in this area?
Sadly no, headers and footers are placed in page margin boxes.
It might however be possible to add some JavaScript that runs when the layout is done and reads the height of the various boxes, then outputs some CSS that will set the right margin heights if included for another Prince run. This requires running Prince twice, but it is a hack that might be useful.. If you upload a sample document I might see if I can write a script for you. It's not a clean and universal solution though, we still need some CSS enhancement that makes header/footer content determine margin box size.

Announcement: repos for tests/utils

Edited by hallvord

Is there a way to get the table tfoot to appear at the bottom of the page instead of at the bottom of whatever content is on the page?
No, unless you use a two pass process with JavaScript to measure the table and then rerun Prince.