CSS: Disable Header & Footer From Print Preview Chrome

Question

one of my application is web based POS(Point Of Sale). so while printing invoices in chrome. the page header and the page footer automatically inserted by the browser that I want to supress via the page and without user intervention..

I applied some CSS over-here in print-media,

@media print {
 #header, #footer { 
    visibility: hidden !important;
    display: none !important;
 }
}

But it's not applying, maybe the selector isn't correct?

And I also tried by reducing the margin as well, but its cutting/ overriding the page-content, if print has multiple pages.. And one more thing, i don't want to disable the print preview option for chrome..

Any one has good solution for this?

Best Regards..

Solution

use

@page{margin:0px auto;}

in your css script. This will most likely throw off your page layout when printing, so you'll probably want to add a #container div with the correct padding to make your page look good again. Only tested on Google Chrome.

Comments

[Andy Dvorak]

If I could upvote this answer more than once, I would. You are a life saver. Thanks!!

[Modermo]

This doesn't work if you're printing more than one page.