show div only when printing

Question

Let's say that I have

<div id="printOnly">
     <b>Title</b>
     <p>
        Printing content 
     </p>
</div>

Is it possible to hide this div when page rendering and to show only when printing this div?

Answer 1

You need some css for that

#printOnly {
   display : none;
}

@media print {
    #printOnly {
       display : block;
    }
}

Answer 2

You should use media query.

In your case:

#printOnly {
    display: none;
}

@media print { 
    #printOnly {
        display: block;
    }
}

PS take a look here http://www.joshuawinn.com/css-print-media-query/ for browser support

Answer 3

@media screen
{
    #printOnly{display:none;}
}

@media print
{
    #printOnly{}
}

Answer 4

You can attach external css stylesheet with media="print" attribute:

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