We are dynamically creating a PDF, and due to the varying length of the content, some of it overflows onto the next page. While we’ve managed to prevent content from overlapping with page breaks, we’re struggling to maintain proper padding for the text that moves to the next page. This is becoming quite frustrating.
Using margins on @page solves the padding issue, but it creates another problem: the background colors no longer cover the full width and height, which is essential for our dense design. We need the background to completely cover the page.
enter image description here
jsfiddle.net/sxehk7Lb
We have attempted to set margins using the @page rule to ensure that content does not overlap with page breaks and maintains appropriate padding. However, while this approach solves the padding problem, it causes the background colors to not extend to the full width and height of the page, which is a critical requirement for our design. We expected to find a solution that maintains both the full-page background coverage and the proper padding for the content.
Volkan Korkmaz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.