title: CSS: Disable Header & Footer From Print Preview Chrome
body: <p>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..</p>
  
  <p>I applied some <strong>CSS</strong> over-here in print-media,</p>
  
  <pre><code>@media print {
   #header, #footer { 
      visibility: hidden !important;
      display: none !important;
   }
  }
  </code></pre>
  
  <p>But it's not applying, maybe the selector isn't correct?</p>
  
  <p>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..</p>
  
  <p>Any one has good solution for this?</p>
  
  <p>Best Regards..</p>