3

I am trying to set a solid background color for the entire printed page when printing from Chrome. The content to be on the page is a dynamic list of unknown length that might span multiple pages.

In order to remove the white margins, I set the margins to 0 mm using the @page rule.

There are two issues that I have not found a solution to.

  1. Unable to set top margin for content on subsequent pages
  2. Unable to fill the last page to the bottom with solid color

What I got:

<html>    
<head>
    <style>
    @page {  
        margin: 0mm; }
    html {    
        -webkit-print-color-adjust: exact;    
        background-color: coral;     
        font-size: 150%; }
    h1 {
        padding-top: 50mm;}
    </style>
    </head>
    <body>
    <h1>Items</h1>
    <ul>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
    </ul>
    </body>
    </html>

Print rendering in Chrome (from saved pdf): enter image description here

Arne S
  • 1,004
  • 14
  • 41
  • 1
    Top margin can be set if you switch to using table for layout (yay) and [use the thead tag](https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode) to create a top margin for every page – Markus Hedlund Jun 21 '22 at 12:40
  • Thanks, that is interesting but only gets me half there. Since I asked the question I have solved the issue by setting the background color using the itext pdf library (which I already use in the project). – Arne S Jun 21 '22 at 22:36

1 Answers1

1

I am currently experiencing the same issue as you. I have found a solution for the 2nd part as you can read here:

Have margins for content but not background on every page when converting/printing HTML to PDF

and here:

https://stackoverflow.com/a/70079034/1222240

you have to create a div with position: fixed and then width and height as 100%, set z-index to 0 and then you can change the background color, it will be printed on every page

The container div will need to have position: relative and z-index: 1

I haven't found a solution for the first issue yet

valepu
  • 3,136
  • 7
  • 36
  • 67