CSS print PDF fixed at the bottom of each page

With the development of the internet, more and more web pages need to be printed, and printed PDF files often require special styling. Sometimes, we want to display additional information at the bottom of the page in the printed PDF file, such as copyright information, page numbers, etc. In this case, we can use CSS to achieve the effect of fixing this content to the bottom of each page.

Implementation Method

To fix specific content to the bottom of each page in a printed PDF, we can use the CSS @page rule and the position: fixed property. The following are the specific implementation steps:

First, we need to create a CSS file to define the styles for the content that will be fixed at the bottom of each page in the printed PDF.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 10px;
background-color: #f0f0f0;
}

In CSS, we define a class called .footer and set its position property to fixed, bottom property to 0, left property to 0, and right property to 0. This fixes the element to the bottom of each page and centers it horizontally. We also set the text-align property to center, the padding property to 10px, and the background-color property to #f0f0f0, respectively, to center the text, set the bottom padding, and set the background color.

Next, we need to include this CSS file in our HTML file and add the corresponding HTML structure to the content that needs to be fixed at the bottom of each page.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<div class="content">

<!-- Page Content -->

</div>

<div class="footer">

Copyright © 2021
</div>

</body>

</html>

In the HTML, we include the CSS file we just created, place the webpage content to be printed in the .content element, and add the copyright information in the .footer element. This completes the setting for the content to be fixed at the bottom of each page in the printed PDF.

Finally, we print the webpage using the browser’s print function and save it as a PDF file. In the printed PDF file, we can see that the content we defined has been fixed at the bottom of each page.

Example

The following is a simple example demonstrating how to fix a copyright message at the bottom of each page. In this example, our CSS and HTML files look like this:

styles.css:

.footer { 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
text-align: center; 
padding: 10px; 
background-color: #f0f0f0; 
}

index.html:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<div class="content"> 
<h1>Hello, World!</h1> 
<p>This This is a simple example of fixing content at the bottom of every page in a PDF document.</p>
</div>
<div class="footer">
© 2021 My Company
</div>

</body>
</html>

Conclusion

Through the above steps, we have successfully achieved the effect of fixing content to the bottom of each page, which is very practical when printing PDF files. Using the CSS @page rule and the position: fixed property, you can easily control the position of elements in the printed PDF without affecting the page’s display in the browser.