title: How to remove header and footer information when printing a web page
body: <p>I'm trying the below shown code. but still i'm getting the header and footer on printed page.</p>
  
  <p>show i am tried many css element but i can't remove the header and footer</p>
  
  <pre><code> &lt;style type="text/css" media="print"&gt;
    @media print {
      Header {
        display: none !important;
      }
      Footer {
        display: none !important;
      }
      #lrno {
        font-size: 20pt;
        position: absolute!important;
        top: 25px;
        left: 30px;
      }
      #consignor {
        font-size: 30pt;
        position: relative;
        top: 70px;
        left: 0px;
      }
      #consignee {
        font-size: 33pt;
        position: relative;
        top: 9px;
        left: 590px;
      }
    }
  
  &lt;/style&gt;
  
  
  
  
  &lt;div id="lrno"&gt;
    &lt;?php echo  $sel['lrno']; ?&gt;
  &lt;/div&gt;
  &lt;div id="consignor"&gt;
    &lt;?php echo  $sel['cr_name']; ?&gt;
  &lt;/div&gt;
  &lt;div id="consignee"&gt;
    &lt;?php echo  $sel['ce_name']; ?&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button class="btn btn-small red" onclick="PrintDiv()"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm getting the footer when printing
  <a href="https://i.stack.imgur.com/2piOn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2piOn.png" alt="I&#39;m getting the footer when printing"></a></p>