Usar CSS para ocultar los contenidos en la impresión

Estoy buscando una manera fácil de ocultar todo, excepto un cierto div y su contenido.Usar CSS para ocultar los contenidos en la impresión

<html> 
    <head></head> 
    <body> 
    <div class="header">...</div> 
    <div class="menu">...</div> 
    <div class="content">...</div> 
    <div class="footer">...</div> 
    </body>. 
</html>

Así, por ejemplo, si quiero imprimir sólo div.content, lo haría así:

.header, .menu, .footer { 
    display: none; 
}

Y si el diseño es complicado, se vuelve desordenado. ¿Hay alguna manera más fácil de hacer esto con CSS?

Fuente

2011-01-27 Dziamid

¡Usted puede imprimir solamente el div que desea siguiendo el artículo! http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168

lo hice manera CSS3: el uso de la clase no seudo y antepasados directos (hijos)

/* hide all children of body that are not #container */ 
body > *:not(#container) { 
    display: none; 
} 
/* hide all children of #container that are not #content */ 
#container > *:not(#content) { 
    display: none; 
} 
/* and so on, until you reach a div that you want to print */ 
#content > *:not(#print_me) { 
    display: none; 
}

esta manera se puede eliminar todo excepto lo que se desea imprimir, incluso en diseños muy complejos. : no es muy eficiente aquí porque se ocupa de cualquier modificación futura de tu html.

Fuente

2011-02-17 00:04:27 Dziamid

@media print { 
.noPrint { 
    display:none; 
    } 
}

Ahora es necesario aplicar la clase noPrint a los elementos que desea ocultar en la impresión.

Es una buena práctica utilizar una hoja de estilo específicamente para la impresión, y establece y que es atributo de los medios de comunicación a print.

Ejemplo:

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

Fuente

2011-01-27 13:33:09 Sarfraz

Asegúrese de agregar la sección de impresión después de que se hayan especificado todas las demás secciones de estilo. De esta forma, las declaraciones de impresión anularán otros estilos en el momento de la impresión. – Mike

pregunta dijo: 'buscando una manera fácil de ocultar todo, excepto un cierto div' – Pooya

Esta debería ser la respuesta aceptada. Es la más flexible de todas las otras respuestas y no implica el uso de JS o el uso de algún plugin de JS para mostrar elementos ocultos manualmente. – TinkerTenorSoftwareGuy

Asignar un archivo CSS independiente que define el comportamiento cuando se imprime una página web.

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

y luego dentro de ese archivo que acaba de definir:

.header, .menu, .footer { display: none; }

Fuente

2011-01-27 13:33:54 Tr1stan

Puede utilizar las clases.

.classHide{display: none}

Dependiendo del idioma que está utilizando, cuando == true si se puede añadir una clase a la cabecera, menú y pie de página.

Así que no necesitará usar otro archivo css.

Fuente

2011-01-27 13:40:40 Thiago

¿Cómo vas a decirles que solo se oculten al imprimir usando cualquier cosa que no sea CSS? – BoltClock

¿Está utilizando solo html + css? – Thiago

Mi punto es que no puede usar un lenguaje del lado del servidor para indicarle a los estilos que solo se apliquen al imprimir. Esto se debe a que la impresión ocurre en el lado del cliente, por lo que el servidor no sabrá nada. – BoltClock

Dependiendo de su estructura HTML (y navegadores que necesita para apoyar, ya que IE6 no soporta esto), usted podría ocultar todos los divs de alto nivel y simplemente mostrar un/unos pocos que quieren mostrar:

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

Fuente

2011-01-27 14:03:05 RoToRa

Usar CSS para ocultar los contenidos en la impresión

Respuesta

Cuestiones relacionadas