Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide all elements except one div for print view

Tags:

css

I have the following CSS for my print style:

* {  display:none; }  #printableArea {  display:block; } 

I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.

I have it included properly in the HEAD, with media="print" on this particular stylesheet.

like image 222
mathiscode Avatar asked Oct 02 '09 20:10

mathiscode


People also ask

How do I hide the elements when printing?

To hide the element, add “display:none” to the element with CSS.

How do I hide a specific div?

To hide an element, set the style display property to “none”. document.

How do I hide everything in HTML?

The following style rule hides an element on a web page: display: none; When you set the value of display to none, the affected element will disappear. This means the element will no longer take up any space on the web page.


1 Answers

If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

* matches the <html> element, so the entire document is hidden.

You need to be more selective about what you hide.

like image 60
Quentin Avatar answered Sep 30 '22 18:09

Quentin