Remove header and footer from window.print()

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 content is too big and requires several pages, the print version will not look good: only the first page will have the 1.6cm top margin, and only the last page will have the 1.6cm bottom margin. Pages in between won’t have top nor bottom margin.

At the time original of this answer (May 2013), it only worked on Chrome (edit: works on FF on Oct 2022), 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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)