DO NOT Print header and footer

HTML & CSS
1

I use the following code to eliminate the printing of header and footer (URL, page, date, etc).

Obviously with this code, on the 2nd page the print is right at the top of the page.

Is there a better way to eliminate headers and footers with normal margins?

Thanks

   <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 0px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
2

Why not just use

header,
footer {
  display: none:
}

?

3

Wish it was that simple, but that won’t prevent your printer from printing that information on the page.

4

display: none; should stop that element being printed.

5

javascript7 is referring to the printers own headers and footers (url and page number etc) which are out of the control of the developer.

The code mentioned in the first post adjusts the page margin so effectively there’s no room for them but doesn’t work everywhere and of course makes the print start right at the top of the page. It might work with a small margin instead that makes a little space but not enough for the headers/footers to show.

e.g.

@page {
      size:auto;
      margin:.5rem 0;
}

As far as I’m concerned this is interfering with the users own behaviour as its the users own print settings that determine whether headers and footers are shown and not up to the whim of the developer. A user can simply turn them off from print preview screen in most browsers or via other settings.

4 Likes
6

Ah, gottit!

1 Like
7

I think the whole point of hiding that would be to present a nicer or cleaner look to perhaps an article or some type of presentation.

8

That does add just enough to make it look better, thanks!

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.