I have a lot of content on my page, but I have no control over where it breaks. I placed some content on each page usingposition:fixedas header/footer, but it overlaps the text. I tried to solve the overlapping issue using margins and padding in the following two ways.
When I add margin using @page
@page { margin: 2cm; }
As it says, it works on every page, but my header and footer also disappear from the margins.
So I tried adding margin using body tag
body { margin: 2cm; /* padding: 2cm; */ }
It works by adding a 2cm top margin on the first page and a 2cm bottom margin on the last page. But not between pages.
Is it possible to set margins/padding for each page?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I had the exact same problem and after a lot of searching I found an interesting article that provides a combined solution, which you can readhere.
In short, it combines two methods:
Use
Position: FixedTechnologyUse
thead tbody tfootIf you only use the first method you will face overlapping issues, similarly if you only use the second method the footer will be stuck at the bottom of the page content, possibly ending at the beginning of the last page, but A combination of these two methods can solve the problem.
Here you can see a workingdemo.
To make sure this solution works, try printing by pressing the
Print Me!button.You may even need to add aPage numberin the footer, this is also done by CSS, you just need to add the following CSS:
.page-footer:after { counter-increment: page; content: counter(page) }In somearticles, it is
content: counter(page) " of " counter(pages);, but in my case,pagesKeeps returning 0 for no reason so I ignored it, maybe you can implement the count using CSS var() to calculate the total number of pages.For the record, if you don't want to observe the header and footer before printing, you can add the following CSS:
@media screen { .header, .footer { display: none; } }2020 Update:
Page numbers don't seem to work anymore.