Hide some part on the web page when printing

What do you do if you want to hide some part when you print your web page? I didn’t find a best solution maybe, but it works for now.

The answer is to use a separate css for printing.

Here is a sample code.

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

The first css is for print only, the second one is for screen display. In the first css, you should set the style for the part you don’t want displayed as following.

#hide_part_id{
     display:none;
}

This is the only way I know. Do you know any other approach?

You may also like:

Leave a comment