Preventing a div and its content from being printed

I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.

How would I achieve this using CSS or Jav开发者_如何学PythonaScript?

A common method is to use a separate CSS for printing. You can have a css for all media and one for print:

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

In the print.css just put the display:none on the div.

Davide

Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:

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

The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):

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

You are looking for @media print.

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

Bit more info on Print Style Sheets

Insert a stylesheet just for print:

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

Then put css to hide the div in that stylesheet

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

in this css file style put display: none; for elements you don't want to be printed

In your html, indicate a stylesheet used for printing:

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

And in this CSS:

#mydiv {display: none;}

You can include a stylesheet that is only applied when printing.

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

In that style sheet, you can hide your divs and make any other necessary changes.

Anyone working with div's inside php then take Divya's recommend. I spent hours on this until ran across this, put into external and all class in other code with php page, works great :) Also, works good with bootstraps whereas bootstrap can otherwise be ignored and still print.

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