Javascript – CSS: Disable Header & Footer From Print Preview Chrome

csscss-selectorsgoogle-chromejavascriptprint-css

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..

Best Answer

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.

Related Topic