JavaScript Answers

How to Disable Browser Print Options (Headers, Footers, Margins) from the Page with JavaScript?

Spread the love

Sometimes, we want to disable the headers, footers, and margins when a web page is being printed with JavaScript.

In this article, we’ll look at ways to disable the headers, footers, and margins on the page when it’s being printed with JavaScript.

Disable Headers, Footers, and Margins with CSS with JavaScript

We can disable headers, footers, and margins with CSS with JavaScript.

For instance, we can write:

<!doctype html>

    <title>Print Test</title>
    <style type="text/css" media="print">
      @page {
        size: auto;
        margin: 0mm;

      html {
        background-color: #FFFFFF;
        margin: 0px;

      body {
        border: solid 1px blue;
        margin: 10mm 15mm 10mm 15mm;


    <div>Top line</div>
    <div>Line 2</div>


We set some styles for the page when being printed with the @page CSS directive.

We set the size to auto and set margin to 0mm to remove the margins.

Then we set the html styles to a white background color and no margins.

And in the body, we set the border and margin styles.

We set the media attribute to print to make sure the styles are only applied when the page is being printed.


We can disable various parts of the page when they’re printed with printing specific CSS styles.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *