How can I print just an area inside a DIV

Question

I have a page with a top navigation area, a side navigation area, a control button area and somewhere in the middle a DIV with an id="content" that contains content.

I would like to be able to print just the contents of that DIV. I realize I have many lines of code making my other areas invisible and resizing everything but is there some alternative? Is there some way I can just print the contents of the DIV?

http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page — Matt, Jun 11 '12 at 14:52
check this link: http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — Jagz W, Jun 11 '12 at 14:54
possible duplicate of [Print
only?](http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) — bfavaretto, Jun 11 '12 at 16:11

score 4 · Accepted Answer · answered Jun 11 '12 at 14:55

4

Take a look at using Media Types - specifically @media print - in your CSS to specify styling that only applies to printing.

This way, you can write a stylesheet that hides everything except your "area inside a DIV".

answered Jun 11 '12 at 14:55

Widor

12,605
6
38
62

score 1 · Answer 2 · answered Jun 11 '12 at 14:56

1

Use a css print stylesheet putting display:none in the fields that you don't want to print. Use the tag link like this:

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

OR @media print {

BODY { font-size: 10pt }

}

answered Jun 11 '12 at 14:56

FabioCosta

2,934
4
26
49

How can I print just an area inside a DIV

2 Answers2