Those Damn Print Headers

Those damn print header/footers that browsers put on every page really ruin your appearance sometimes when you need to create a page which looks great when it's printed. Don't you wish you could just turn them off? Well, you can!

The solution is simple:

@page {
  margin: 0.312in 0.312in 0.322in;
}
@media print {
  html {
    margin: 0.1in;
  }
}

@page is a new selector which targets each individual printed page. Setting a margin: 0; for this would remove all the print margins and your design would go right to the end of the page.

But of course you still want a margin. So I've worked out out the maximum margin values you can set before the browser pops in its ugly head.

For the top margin, the max is .312in. Any greater and the browser's header is displayed. .312in also happens to fit the side margins perfectly and there's almost no difference between the default margins.

The bottom margin can be increased a bit more, right up to .322in giving it that extra bit of room.

We have also set a margin of .1in on the html element just to increase the margin that extra bit more to bring it in line with the browser defaults. Note that this does not affect the bottom of the page (as the HTML element spans all the pages), or the top of the additional pages. You may prefer using margin: 0 .1in; instead.

Unfortunately it does not seem possible to set your own header and footer on every printed page.

Compatibility?

I've tested this as working in Chrome v25, although I'm sure it'll work fine in any recent version.

Other browsers aren't as good:

Safari v5.1.7 -- has no effect
Firefox v17 -- has no effect

As this solution has no effect in other browsers, I'd consider this a safe solution for Chrome only.

Compatibility?

Demo