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

Asked

Viewed 5,329 times

2

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; }
css

  • header { display: None ! Important; } footer { display: None ! Important; }

3 answers

4

In the case header and footer of the browser know that it is possible in the settings: inserir a descrição da imagem aqui

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>

  • I’m using media=print with the display:None to hide several elements but the header and Footer are created alone, when I ask to view the print page it puts the date on top and under each page a link and when deactivated in the Browser the option: "Header and Footer" then disappears, but I would like to take it via CSS code with media=print. I’m using Chrome as a browser

  • are not elements of my page, the browser that creates this Header and Footer when making any impression, if you ask to print this page for example will appear a header with the date and a footer with the link of this page on all pages created by the browser and this is what I need to remove

  • 1

    Vaaaaaaaaaaaaaaaaaaaaaleeeu @Caique Romero, helped a lot

1

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>

1


Paula, try this on your @media print: 

@page{size: auto;}

  • It worked, thank you :D

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.