How to disable browser print options (header, footer, margins) from a page using CSS?-CSS Tutorial-php.cn

How to disable browser print options (header, footer, margins) from a page using CSS?

WBOY

Release： 2023-08-30 14:01:02

forward

1085 people have browsed it

如何使用 CSS 从页面禁用浏览器打印选项（页眉、页脚、边距）？

We can control the header, footer and margins of the print preview page through CSS, and even achieve the desired paging media layout and direction. We will use the @page directive to achieve our results.

When previewing the printed page in the browser, we can see some additional page information, such as page title, page preview date and time, and page number in the preview, which are displayed in the header and footer of the page middle. We can also see some extra margins applied to the page preview media.

grammar

@media print {
   @page {
      /* Desired CSS */
   }
}

Copy after login

The Chinese translation of

Explanation

is:

Explanation

In this approach, we will use the @page at rule (or directive) inside the @media print rule, which is provided by CSS and allows us to apply formatting on paginated media, which includes pages visible on the screen, Papers, etc

With the @page directive, we can control the layout, design, margins, direction of the printed page, and even the design of a specific page. This directive is widely used for designing discrete (paged) media.

Paginated media is different from usual continuous media (such as websites) because in paginated media, if the content overflows, it is divided into separate pages. We can still control the layout of the page through the pseudo-class of the @page directive.

The Chinese translation of

Example 1

is:

Example 1

In this example, we will remove the visible header, footer, and extra margins in paginated media by setting the margins to "0" within the @paged directive.

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
   @page {
   margin: 0;
   }
</style>
<body>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
      magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
      aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
      reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
      repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
      rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
   </p>
</body>
</html>

Copy after login

Press command p (in Mac) or ctrl p (in Windows, Linux) to view the print preview screen

Example 2

In this example, we will remove the browser print option from the paginated media, but add margins to the body element in the paginated media screen.

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
   @media print {
      @page {
         margin: 0;
      }
      body {
         margin: 2rem;
      }
   }
</style>
<body>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
      magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
      aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
      reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
      repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
      rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
   </p>
</body>
</html>

Copy after login

Press command p (in Mac) or ctrl p (in Windows, Linux) to view the print preview screen

in conclusion

In this article, we learned about the @paged CSS directive and how you can use it to remove/disable browser print options from print preview using only CSS.

The above is the detailed content of How to disable browser print options (header, footer, margins) from a page using CSS?. For more information, please follow other related articles on the PHP Chinese website!