How to remove header and footer information when printing a web page

Question

I'm trying the below shown code. but still i'm getting the header and footer on printed page.

show i am tried many css element but i can't remove the header and footer

 <style type="text/css" media="print">
  @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;
    }
  }

</style>




<div id="lrno">
  <?php echo  $sel['lrno']; ?>
</div>
<div id="consignor">
  <?php echo  $sel['cr_name']; ?>
</div>
<div id="consignee">
  <?php echo  $sel['ce_name']; ?>
</div>
<div>
  <button class="btn btn-small red" onclick="PrintDiv()"></button>
</div>

I'm getting the footer when printing

i don't add any special header and footer item . I only like to remove the browser default header and footer like a url, page title , page number — Sail, Dec 17 '15 at 07:38

score 0 · Answer 1 · answered Dec 17 '15 at 07:57

0

As far as i know, header and footer from browser can set from browser itself. On firefox, you can access from File -> Page Setup then Margin & Header/Footer tab, then set "--blank--" on Header/Footers section.

answered Dec 17 '15 at 07:57

QeiNui

65
1
8

This is stackoverflow, not superuser: The question was asked from the perspective of a web developer not that of a browser user. – Quentin Dec 17 '15 at 08:13
Most browser did not allow web developer to control browser. – QeiNui Dec 18 '15 at 01:43

score -1 · Answer 2 · answered Dec 17 '15 at 08:07

-1

add thhis class to your header and footer

this media query is working for me

@media print {
.no-print, .no-print * { display: none !important; } }

answered Dec 17 '15 at 08:07

Mohamed Rihan

131
2
15

The question is asking about the header and footer generated by the browser, not elements that are in the page itself. – Quentin Dec 17 '15 at 08:12
oh :O i think maybe this will help https://github.com/jquery/standards/issues/9 – Mohamed Rihan Dec 17 '15 at 08:28

How to remove header and footer information when printing a web page

2 Answers2