How to remove Header and footer from HTML page when printing in browser using CSS

Question

I am trying to remove header and footer from first page only in a html and the header and footer will be repeated on the next pages while I am trying to print, I found a way to remove the header but I cannot remove the footer using the same method. Here is the HTML and CSS that removes header but not footer. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="diff.css">
</head>
<body>
    


<body>
    <!--Here the HTML of the first header (displayed on landing page)-->
    <header class="header-cover">
        <img class="logo-big"
            src="https://picsum.photos/150/100" />
        <div class="right">
            Header 1
        </div>
    </header>

      <!-- Here the HTML of the repeated header (on others pages)-->
    <header class="header">
       <img class="logo-big"
            src="https://picsum.photos/200/100" />
        <div class="right">
            Repeated Header 
        </div>
    </header>
    <table>
        <thead>
        <tr>
            <td>
                <!--place holder for the fixed-position header-->
                <div class="header-space">&nbsp;</div>
            </td>
        </tr>
        </thead>
    
        <tbody>
        <tr>
            <td>
                <!--*** CONTENT GOES HERE ***-->
                <h1>Title</h1>
                <p class="content">
                    <div class="page">
                        Content Goes here
                    </div>
                </p>
            </td>
        </tr>
        </tbody>
    
        <tfoot>
        <tr>
            <td>
                <!--place holder for the fixed-position footer-->
                <div class="footer-space">&nbsp;</div>
            </td>
        </tr>
        </tfoot>
    </table>
    <!-- Repeated Footer -->
    <footer class="footer">
        <p>
            Text footer
        </p>
    </footer>
    <footer class="footer-cover">
        <p>
            different footer
        </p>
    </footer>
    <button onclick="window.print()">Test Here</button>
    </body>


</html>

CSS:

@media print {
    .page{
        page-break-after: always;
    }
    .header, .footer {
        position: fixed;
    }
    
    .header, .header-cover {
        display:flex;
    }

    .header {
        top: 100%;
    }
    
    .header, .header-space {
        height: 5rem;
    }
    
    .footer, .footer-space {
        height: 4rem;
    }
    .footer, .footer-cover {
        display: flex;
    }
    .footer {
        bottom: 0;
    }

      
  }

I am trying really hard to fix it but I am not able to do it. Thank you in advance

I tried replicating the same what I did for Header but was not successful, I tried using Jinja2 template to stack them on top of each other, still didn't work. Have been trying to troubleshoot using CSS but so far no success.

Just a heads up. This ".footer, .footer-cover" means "class footer and class footer-cover". What I think you want is "footer.footer-cover" which is "element footer with class footer-cover" — Ja Da, Jul 13 '23 at 11:25
one footer has class footer (yeah I know looks stupid but please bear with it) and the other footer has class footer-cover. So, I believe I wanted in that manner. It could be div and would probably behave in the similar fashion. — Omer, Jul 13 '23 at 11:32
See my answer below, but maybe I'm not clear on what you are trying do do. Your print styles are working fine, but what is your goal? Are you trying to prevent certain elements from being shown when printing? If so which elements? Have you tried `display: none`? — Chris Barr, Jul 13 '23 at 11:48
I am trying to create a dynamic document using jinja which then I can print using QTWebengine into a PDF and I need a first_page which doesnt have any header or footer, In my quest of doing so I have tried various methods and one of those is using display: none. But ofcourse it just removes header and footer from all of them which I dont want. I just want it to be removed from first page of html where the landing page will be. I hope this gives a bit more clarification to the problem. — Omer, Jul 13 '23 at 14:29

Chris Barr · Answer 1 · 2023-07-13T16:41:25.227

What you have seems to work for me. One thing to note though is that you had

<p class="content">
  <div class="page">Content Goes here</div>
</p>

which is actually invalid because you cannot have a block level element inside of a <p> tag or else it will cause the paragraph to close before you intend it to. So I changed it to the following:

<p class="content">
  <span class="page">Content Goes here</span>
</p>

So here's your code with that minor change made:

/*This is just for the demo to show a style change*/
.is-home-page #title-not-home,
#wrapper:not(.is-home-page) #title-home {
    display: none;
}
    
@media print {
    .page{
        page-break-after: always;
    }
    
    /*When a parent element has the `.is-home-page` class, the `.header` and `.footer` will not show when printing*/
    .is-home-page .header,
    .is-home-page .footer {
        display: none;
    }
}

<div id="wrapper">
  <h1 id="title-home">This is the home page</h1>
  <h1 id="title-not-home">This is NOT the home page</h1>

  <!--Here the HTML of the first header (displayed on landing page)-->
  <header class="header-cover">
      <img class="logo-big"
          src="https://picsum.photos/150/100" />
      <div class="right">
          Header 1
      </div>
  </header>

    <!-- Here the HTML of the repeated header (on others pages)-->
  <header class="header">
     <img class="logo-big"
          src="https://picsum.photos/200/100" />
      <div class="right">
          Repeated Header 
      </div>
  </header>
  <table>
      <thead>
      <tr>
          <td>
              <!--place holder for the fixed-position header-->
              <div class="header-space">&nbsp;</div>
          </td>
      </tr>
      </thead>

      <tbody>
      <tr>
          <td>
              <!--*** CONTENT GOES HERE ***-->
              <h1>Title</h1>
              <p class="content">
                  <span class="page">
                      Content Goes here
                  </span>
              </p>
          </td>
      </tr>
      </tbody>

      <tfoot>
      <tr>
          <td>
              <!--place holder for the fixed-position footer-->
              <div class="footer-space">&nbsp;</div>
          </td>
      </tr>
      </tfoot>
  </table>
  <!-- Repeated Footer -->
  <footer class="footer">
      <p>
          Text footer
      </p>
  </footer>
  <footer class="footer-cover">
      <p>
          different footer
      </p>
  </footer>
  
  <hr/>
  
  <button onclick="document.querySelector('#wrapper').classList.toggle('is-home-page')">Toggle home page Class</button>
  <button onclick="window.print()">Test Print Preview</button>
</div>

I will try to explain better, in the images that you posted, the header is different on first page and the second page but the footer remains the same, I want the header and footer of the first page to be different from the rest of pages. Thank you for taking the time to answer the question, really appreciate it. — Omer, Jul 13 '23 at 12:31
when you say "different" what do you mean? I'm still not clear about what exactly you want to change. The print styles do apply, but what are you expecting to happen that is not happening yet"? — Chris Barr, Jul 13 '23 at 13:59
What I mean by different is the header on the first page is not similar to the header of second page that you can see in your screenshots, I want to do something similar for footer as well. In reality I just want no header and footer on my landing page when I am trying to print it. I just want header and footer to start from second page which is an A4 size paper sheet. — Omer, Jul 13 '23 at 14:30
so will `.header{ display: none; }` not do what you want? I'm not really sure how to achieve this without specifics about how to determine when to show or hide different elements — Chris Barr, Jul 13 '23 at 14:59
Ok, see my updated answer. You'll need to add some way to determine if the page is the home page or not, like adding a CSS class on one page and not the other. You can then target that with a CSS selector to show/hide different elements when printing — Chris Barr, Jul 13 '23 at 16:42

score 1 · Answer 2 · answered Jul 13 '23 at 13:28

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="diff.css">
    <style>
      @media print {
    .page{
        page-break-after: always;
    }
    .header, .footer {
        position: fixed;
    }
    
    .header, .header-cover {
        display:flex;
    }

    .header {
        top: 100%;
    }
    
    .header, .header-space {
        height: 5rem;
    }
    
    .footer, .footer-space {
        height: 4rem;
    }
    .footer, .footer-cover {
        display: flex;
    }
    .footer {
        bottom: 0;
    } 
  }
    </style>
</head>
<body>
    


<body>
    <!--Here the HTML of the first header (displayed on landing page)-->
    <div class="header-cover">
        <img class="logo-big"
            src="https://picsum.photos/150/100" />
        <div class="right">
            Header 1
        </div>
      </div>

      <!-- Here the HTML of the repeated header (on others pages)-->
    <div class="header">
       <img class="logo-big"
            src="https://picsum.photos/200/100" />
        <div class="right">
            Repeated Header 
        </div>
      </div>
  
                <!--place holder for the fixed-position header-->
                <div class="header-space">&nbsp;</div>
            
  
                <!--*** CONTENT GOES HERE ***-->
                <h1>Title</h1>
                <p class="content">
                    <div class="page">
                        Content Goes here
                    </div>
                </p>

                <!--place holder for the fixed-position footer-->
                <div class="footer-space"></div>
            
    <!-- Repeated Footer -->
    <div class="footer">
        <p>
            Text footer
        </p>
      </div>
    <div class="footer-cover">
        <p>
            different footer
        </p>
      </div>
    <button onclick="window.print()">Test Here</button>
    </body>


</html>

How to remove Header and footer from HTML page when printing in browser using CSS

2 Answers2