Cómo evitar que un div y su contenido se impriman

Question

Tengo una página de impresión, y quiero poner un div con algunas instrucciones sobre cómo imprimir la página en él. No quiero que aparezca esta sección cuando realmente impriman la página.

¿Cómo puedo lograr esto usando CSS o JavaScript?

Answer 1

Un método común es usar un CSS separado para imprimir. Puede tener un css para todos los medios y uno para la impresión:

<link rel="stylesheet" 
    type="text/css" 
    media="print" href="print.css" /> 

En el print.css sólo hay que poner la pantalla: ninguno en el div.

Davide

Answer 2

Está buscando @media print.

Answer 3

Puede incluir una hoja de estilo que solo se aplica al imprimir.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css"> 

En esa hoja de estilo, puede ocultar sus divs y hacer cualquier otro cambio necesario.

Answer 4

http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

poco más de información sobre las Hojas de Estilo de impresión

Answer 5

Inserte una hoja de estilo sólo para impresión:

<link rel="stylesheet" href="/path/print.css" media="print" /> 

a continuación, poner CSS para ocultar el div en esa hoja de estilo

Answer 6

<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" /> 

en este estilo de archivo css mostrar: ninguno; para los elementos que no desea que se imprimirá

Answer 7

En su html, indicar un estilo utilizada para la impresión:

<link rel="stylesheet" type="text/css" media="print" href="print.css"/> 

Y en este CSS:

#mydiv {display: none;} 

Answer 8

Dado que no se ha dicho aquí antes, que no necesariamente necesita tener una hoja de estilos externa:

<style type="text/css" media="print"> 
.hideMeInPrint { display: none; } 
</style> 

Answer 9

La solución más sencilla es añadir esto en el CSS principal archivo. Ten en cuenta que, cuando se vincula el archivo CSS, no se debe especificar el atributo media (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):

@media print { 
    div.classname { 
    display:none; 
    } 
} 

Answer 10

Cualquiera que trabaje con divs dentro de php luego tomar Divya es recomendable. Pasé horas en esto hasta que encontré esto, ponerlo en externo y en toda clase en otro código con la página php, funciona muy bien :) Además, funciona bien con bootstraps mientras que bootstrap puede ignorarse y aún así imprimirse.

@media print { 
    div.classname { 
    display:none; 
    } 
}