How to Remove Header and Footer with @media print CSS?

Question

I’m using the @media print{} CSS to customize the page when printing, but I’m not able to remove the footer and header created by own browser.

I know it can be removed by the settings of Browser, but I don’t know how to remove via code with CSS or through javascript?

Below is what I tried:

header { display: none !important; } 
footer { display: none !important; } 

Answer 1

In the case header and footer of the browser know that it is possible in the settings:

But I saw an answer in SO saying that this css effect:

@page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

Source:

https://stackoverflow.com/questions/8228088/remove-header-and-footer-from-window-print

If you are talking about a header or footer created by you:

You can do this using display: none;

The CSS property display specifies the type of render box used by an element.

Display with value none: Disables element display (without affecting layout); all child elements also have their display disabled.

@media print{
   #noprint{
       display:none;
   }
}

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

<div id="noprint">
    Elemento que será ocultado na impressão...
</div>

Answer 2

Creates a class within a @media print and put this class on all the elements you want to delete at the time of printing.

@media print {

    .no-print{
       display: none;
    }

}

<a href="#" class="no-print"> Link do Rodapé </a>

Answer 3

Paula, try this on your @media print:

@page{size: auto;}