Remove header and footer from window.print()

css printing

309,971

Solution 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.

Solution 2

I am sure Adding this code on your css file will solve the problem

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

You may visit this to know more about this

Solution 3

Firefox :

Add moznomarginboxes attribute in <html>

Example :

<html moznomarginboxes mozdisallowselectionprint>

Solution 4

Today my colleague stumbled upon the same issue.

As the "margin:0" solution works for chromium based browsers, however, Internet Explorer continue to print footer even if @page margins are set to zero.

The solution (more of a hack) was to put negative margin on the @page.

@page {margin:0 -6cm}
html {margin:0 6cm}

Please note that negative margin won't work for Y axis, only for X

Hope it helps.

Solution 5

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.

<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 current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

and for firefox use it

In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).

In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.

View more solutions

309,971

Author by

Viralk

A passionate magento certified developer

Updated on July 08, 2022

Comments

Viralk almost 2 years
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.
rybo111 almost 11 years

For some reason, body { margin: 1.6cm; } was ignoring the right margin for me (perhaps because I was using text-align:right), so instead I created a <div class="container"> for my content and used .container { margin: 1.6cm; } instead.
pau.moreno over 10 years

I'm trying this with Chrome 33. It works great, but be careful, because body { margin: 1.6cm; } - as it's a margin for the whole document - won't respect the vertical margins for multi-page documents, except the very first and last. Sadly, I can't think of a workaround.
Learner over 10 years

No. It is not working. It is setting the margin that's it. It is still displaying url and date time on header and footer
Vishal Kiri almost 9 years

Hey @Diego , I am happy with your suggestion and my header footer was remove but my print page was increase. "body { margin: 1.6cm; }" just change 1.6cm to 1.0cm and it is working.. :) Happy codding
Aljullu almost 8 years

This is not going to work anymore after Firefox 48 is released (August 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
Fil Karnicki almost 8 years

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
alireza azami almost 8 years

thanks for the suggestion SurvivalMachine. I edited my answer some minutes ago :)
Nikhilus over 7 years

In above code the <div id="header" style="background-color:White;"></div> <div id="footer" style="background-color:White;"></div> are optional.
jedison over 7 years

There is a more extensive answer here: stackoverflow.com/questions/1960939/…
André Guimarães Sakata over 6 years

Removing the page margin and adding body margin was generating an empty page for me. I changed the body margin to padding and it worked.
TwystO over 6 years

This looks to be the proper way to do it. Even in my case into an iframe context, it works great.
Paul about 6 years

Hmmm... I don't fancy having to run around all my users and update their browsers (however many they use) to take account of this one app, especially if they live on the other side of the planet. Also, what if they need the settings back for another app? This isn't an answer.
bananaforscale almost 6 years

This approach lacks the cross-browser functionality that a featured baked into the page/app would provide.
Kiko almost 6 years

it doesn't work for me, FF 61, but the @page { margin: 0; } solution seems to work in FF as well.
nights over 5 years

This does nothing.
Jan V. about 5 years

Both margin and padding on body will ignore the right margin/padding for me.
Sámal Rasmussen over 4 years

Works for Chrome and Firefox, but not IE 11.
TNT over 4 years

For me was better to set @media print {@page{margin:10mm;}} as it sets margin for page and remove header/footer. Setting margins for body doesn't work well in multi pages.
gamingexpert13 about 3 years

I don't think this actually applies to the question of how to hide the default headers/footers that the browser adds to printed pages (with date and url and page number, etc). I think this is just a simplified example of creating a div you want printed, and hiding other divs you don't want printed.
easleyfixed about 2 years

If you want to BLOCK printing using this script, just add a body{ display:none:} before the @page part, and now when they print its a completely blank page. Hope this helps someone.