HTML header/footer print capabilities

html css printing header footer
Fabien Ménager picture Fabien Ménager · Feb 3, 2011 · Viewed 7.1k times · Source

I'm trying hard to give full HTML header/footer printing capabilities to our Mediboard project.

Long term, I know that CSS3 Page Media module will fulfill my needs, but that's two or three years away at least.

So I tried to make it work with CSS2 capabilities, and it almost works as you can see on this printable document. Yet, I still have a limitation on the footer where the content prints under the footer (see pages 3-4 with Print Preview).

Though I'm pretty sure the padding-bottom of the div.body used to make it work in Firefox 2.

Anyway, does someone have a tricky clue to help me on that problem?

EDIT: To give more details, we currently have headers and footers by using elements positioned with position: fixed, with top:0 or bottom:0 depending if it is a header or a footer. This works well, and when printing, these elements are repeated on each page at the right position (see the "printable document" example). The only problem is when a page break occurs, the text is drawn behind these elements (see page 3/4)

EDIT2: Updated the document's URL

Answer

Beez picture Beez · Mar 18, 2011

It looks like CSS2 has a @page rule in which you can define your page size and a margin:

@page { size:8.5in 11in; margin: 6em 1em 2em }

-or-

@page { size:auto; margin: 6em 1em 2em }

Unfortunately I don't have time to test it, but I would love to know if it works. I could use that.

I like what you're planning with the header/footer. Good work :)

Related questions

Is there a way to get a web page header/footer printed on every page?

Based on my research, it seems that what I want to do is not possible, but in case something has changed, I wanted to check to see if anyone had come up with a way to do this. I have …

Read More
CSS: Repeat Table Header after Page Break (Print View)

I have html table for printing with repeat header and footer. Everything works, document to break automatically. But now i would like to break page after any element. I use to css property page-break-after and set it to always. Yes, …

Read More
How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More