DEVHIDE
Login Or Sign up

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

1k Views Asked by At

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.

html css footer html-heading
Original Q&A
2

There are 2 best solutions below

6
Chris Barr On

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>

0
AJ Ande On 
<!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>

Related Questions in HTML

Related Questions in CSS

Related Questions in FOOTER

Related Questions in HTML-HEADING

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.