Remove Header and Footer from Window.Print()

How to remove header and footer from window.print() without set margin to 0?

Just use the @media print query within your css. For example:

@media print {
  thead, tfoot {  
    display: none !important
  }
}

I would wish it could be that easy. I mean, the automatic headers and footers that the browser is creating, that contains the URL, the number of page and other useless (In my situation) data.

Ok, now, I got it. You can try this (should work on Chrome):

@media print {
  @page {
    size: auto;
    margin: 0mm;
  }

  /* in case @page {margin: 5cm 0 5cm 0;} doesn't work */
  body {
    padding-top: 5cm !important;
    padding-bottom: 5cm !important;
  }
}

Disabling browser print options (headers, footers, margins) from page?

The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

Downside is that behavior in different browsers is not consistent. Safari still does not support setting printer page margin at all, but all the other major browsers now support it.

With the @page directive, you can specify printer margin of the page (which is not the same as normal CSS margin of an HTML element):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

This does not work in Firefox 3.6, IE 7, Safari 5.1.7 or Google Chrome 4.1.

Setting the @page margin does have effect in IE 8, Opera 10, Google Chrome 21 and Firefox 19.

Although the page margins are set correctly for your content in these browsers, the behavior is not ideal in trying to solve the hiding of the header/footer.

This is how it behaves in different browsers:

In Internet Explorer, the margin is actually set to 0mm in the settings for this printing, and if you do Preview you will get 0mm as default, but the user can change it in the preview.

You will see that the page content actually are positioned correctly, but the browser print header and footer is shown with non-transparent background, and so effectively hiding the page content at that position.
In Firefox newer versions, it is positioned correctly, but both the header/footer text and content text is displayed, so it looks like a bad mix of browser header text and your page content.
In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.
In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

Removing elements that appear when printing, using print.css stylesheet

There are quite a few posts on the subject here on StackOverflow:

Remove header and footer from
window.print()
Removing page title and date when printing web page (with
CSS?)
Can I remove the URL from my print css, so the web address doesn't
print?
How to remove the URL from the printing
page?
Disabling browser print options (headers, footers, margins) from
page?

Looks like it works by using the @page media property in combination with the print media property:

@media print {
    @page { margin: 0; }
  }

However, it only seems to work in Chrome (for the moment). Firefox can be made to oblige, though. Elsewhere, it was suggested to create PDF on the fly - or to use JavaScript to set at least the page title to an empty string.

Also, I'd question why you'd want to hide something your users are usually used to have control over.

To answer your question, though: The LA Times use bootstrap, which sets the page margin as follows:

...@page{margin:.5cm}...

Remove Header and Footer from Window.Print()

How to remove header and footer from window.print() without set margin to 0?

Disabling browser print options (headers, footers, margins) from page?

This is how it behaves in different browsers:

Removing elements that appear when printing, using print.css stylesheet

Related Topics

Leave a reply