Skip to main content

How to Remove the Header and Footer When Printing a Web Page

When a user prints a web page, browsers automatically add a default header (containing the page title and date) and a footer (containing the URL and page numbers). While this is useful for context, it's often undesirable for printing invoices, reports, or tickets where a clean, custom layout is required.

This guide will teach you how to use CSS to remove the browser's default print headers and footers. You will also learn how to create a "print-friendly" version of your page by hiding unnecessary elements like navigation bars and buttons.

The Core Method: The @page CSS At-Rule​

The key to controlling the printed page itself (as opposed to its content) is the @page CSS at-rule. This special rule allows you to modify properties of the printed page, such as its margins, size, and orientation.

To ensure these styles are applied only during printing, we wrap them in a @media print block.

The Solution: How to Remove Headers and Footers​

The browser's default header and footer are rendered within the page's margin box. The simplest and most effective way to remove them is to set the page margins to 0.

Problem: you want to print a page without the browser adding the title, date, URL, or page numbers.

Solution: add the following CSS to your stylesheet or a <style> tag in your HTML.

@media print {
  @page {
    /* Set the page margins to 0 */
    margin: 0;
  }
}
note

This single rule tells the browser to leave no space for its default headers and footers.

Important: This will cause your content to be printed right up against the edge of the paper. It's a good practice to add a margin back to your <body> element within the same print media query to ensure your content is readable.

@media print {
  @page {
    margin: 0;
  }
  body {
    /* Add a margin to the body to create a printable area */
    margin: 1.5cm;
  }
}

Hiding Unnecessary Page Elements for Printing​

When printing a webpage, you almost always want to hide interactive elements like navigation bars, sidebars, cookie banners, and buttons. You can do this by setting their display property to none inside the @media print block.

Problem: your page has a header, a footer, and a "Print" button that should not appear on the printed paper.

Consider the following HTML as example: HTML:

<header class="page-header">...</header>
<main class="content">The main content to print.</main>
<footer class="page-footer">...</footer>
<button class="no-print">Print this Page</button>

Solution: create a helper class (e.g., .no-print) and target other elements by their tag name or class to hide them.

CSS:

@media print {
  /* Hide elements that should not be printed */
  .page-header,
  .page-footer,
  .no-print {
    display: none;
  }
}
note

This is a clean and maintainable way to ensure your printed output contains only the relevant information.

Practical Example: A Print-Friendly Invoice​

This example combines all the techniques to create an invoice page that looks good on screen but produces a clean, professional printout.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Invoice #123</title>
  <style>
    body { font-family: sans-serif; }
    .invoice-box { border: 1px solid #ccc; padding: 20px; }
    
    /* Print-specific styles */
    @media print {
      @page {
        margin: 0; /* Remove browser headers/footers */
      }
      body {
        margin: 1.5cm; /* Add a margin for readability */
      }
      .no-print {
        display: none; /* Hide the print button */
      }
      .invoice-box {
        border: none; /* Remove the border for the printout */
      }
    }
  </style>
</head>
<body>
  <div class="invoice-box">
    <h1>Invoice #123</h1>
    <p>This is the main content of the invoice...</p>
  </div>
  <button id="print-btn" class="no-print">Print Invoice</button>

  <script>
    document.getElementById('print-btn').addEventListener('click', () => {
      window.print();
    });
  </script>
</body>
</html>

When a user clicks the "Print Invoice" button, the browser's print preview will show a clean page with no default headers/footers and no "Print Invoice" button.

Conclusion​

Creating a professional, print-friendly version of a web page is a straightforward task with modern CSS.

  • To remove the browser's default headers and footers, use the @page rule inside a @media print block and set the margin to 0.
  • Remember to add a margin back to your <body> within the same media query to keep your content from touching the paper's edge.
  • To hide unnecessary elements like navigation or buttons during printing, set their display property to none inside the @media print block.

Table of Contents