2

Estou utilizando o @media print{} do CSS para personalizar a página na hora de imprimir, porém não estou conseguindo retirar o rodapé e cabeçalho criado pelo próprio navegador.

Sei que dá para retirar pelas configurações do Browser, mas não sei como retirar via código com CSS ou através do javascript?

Segue abaixo o que tentei:

header { display: none !important; } 
footer { display: none !important; } 
1
  • header { display: none !important; } footer { display: none !important; }
    – Paula NS
    3/10/2017 às 14:14

3 Respostas 3

4

No caso cabeçalho e rodapé do navegador sei que é possível nas configurações: inserir a descrição da imagem aqui

Mas vi uma resposta no SO dizendo que esse css surtiria efeito:

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

Fonte:

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

Caso esteja falando de um Header ou footer criado por você:

Você pode fazer isso utilizando display: none;

A propriedade CSS display especifica o tipo de caixa de renderização usada por um elemento.

Display com valor none: Desabilita a exibição do elemento (sem afetar o layout); todos os elementos filhos também tem sua exibição desabilitada.

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

@page{
  size: auto;
  margin: 0mm;
}
<div id="noprint">
    Elemento que será ocultado na impressão...
</div>

3
  • Estou utilizando o media=print com o display:none para esconder vários elementos mas o cabeçalho e o Rodapé são criados sozinhos, quando peço para visualizar a página de impressão ele coloca a data em cima e embaixo de cada página um link e quando desativo no Browser a opção: "Cabeçalho e Rodapé" aí desaparece, mas gostaria de tirar via código CSS com o media=print. estou utilizando o Chrome como navegador
    – Paula NS
    3/10/2017 às 14:19
  • não são elementos da minha página, o browser que cria esse Cabeçalho e Rodapé quando se faz qualquer impressão, se pedir para imprimir está página por exemplo vai aparecer um cabeçalho com a data e um rodapé com o link desta página em todas as páginas criado pelo browser e é isto que eu preciso retirar
    – Paula NS
    3/10/2017 às 14:29
  • 1
    Vaaaaaaaaaaaaaleeeu @Caique Romero, ajudou demais 7/05/2019 às 11:22
2

Paula, tente isso no seu @media print:

@page{size: auto;}
1
  • Funcionou, obrigada :D
    – Paula NS
    3/10/2017 às 14:45
1

Cria uma classe dentro de um @media print e coloque essa classe em todos os elementos que você deseja excluir na hora da impressão.

@media print {

    .no-print{
       display: none;
    }

}

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .