Remove header and footer from window.print()

by

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.

More Related Contents:

  1. How to use HTML to print header and footer on every printed page of a document?
  2. How do I hide an element when printing a web page?
  3. CSS to set A4 paper size
  4. Google Chrome Printing Page Breaks
  5. How can I force browsers to print background images in CSS?
  6. Browser Support for CSS Page Numbers
  7. CSS Printing: Avoiding cut-in-half DIVs between pages?
  8. how to avoid extra blank page at end while printing?
  9. How to only show certain parts with CSS for Print?
  10. Suggestions for debugging print stylesheets?
  11. Good rules for setting up print css? [closed]
  12. How do I Make Firefox Print a Background-Color Style?
  13. Need to remove href values when printing in Chrome
  14. Print Background colours in Chrome
  15. Safe width in pixels for printing web pages?
  16. Print styles: How to ensure image doesn’t span a page break
  17. Excessive Spaces Between Words [closed]
  18. Order columns through Bootstrap4
  19. Is there a way to apply a CSS style on HTML5 datalist options?
  20. Style element based on selected
  21. Applying CSS styles only to certain elements
  22. angularjs: ng-src equivalent for background-image:url(…)
  23. Failed to decode downloaded font
  24. CSS Grid – Auto height rows, sizing to content
  25. Which HTML5 reset CSS do you use and why? [closed]
  26. Is a relative path in a CSS file relative to the CSS file?
  27. Can you add noise to a CSS gradient?
  28. What does a `~` tilde in a CSS `url()` do?
  29. placing background image in a rhombus shaped container is causing the container to lose its shape
  30. prevent a pseudo element from triggering hover?

Leave a Comment