css - Remove header and footer from window.print()

Question

I am using window.print() for printing page, but I got header and footer contains page title, file path, page number and date. How to remove them?

I tried print stylesheet also.

#header, #nav, .noprint
{
display: none;
}

Please help. Thanks.

Answer 1

In Chrome it's possible to hide this automatic header/footer using

@page { margin: 0; }

Since the contents will extend to page's limits, the page printing header/footer will be absent. You should, of course, in this case, set some margins/paddings in your body element so that the content won't extend all the way to the page's edge. Since common printers just can't get no-margins printing and it's probably not what you want, you should use something like this:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

As Martin pointed out in a comment, if the page have a long element that scrolls past one page (like a big table), the margin is ignored and the printed version will look weird.

At the time original of this answer (May 2013), it only worked on Chrome, not sure about it now, never needed to try again. If you need support for a browser that can't hable, you can create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it), but that's a huge hassle.