How can I print background color on last page with CSS?

Question

I am trying to display a solid background color when I print.
I have used

@media print { 
    height: 100%;
    min-height:100%;
    background: #CCC; 
}

And activated "print background graphics" in Chrome and Safari.
But on the last page theres a white spot below because the website does not cover the 100% height of the A4/Letter page.

Photos:

First page: Looks as intended.

Last page: Theres a empty white space below that I want to fill with color.

Thermomagnetic

Answer 1

You can use 100vh (Viewport-height), to set your page is full.

For example, on the last page. You have an empty white space below that I want to fill with color. You can try to use the vh.

@media print { 
    height: 100vh;
    min-height: 100%;
    background: #CCC; 
}

Magisterial

Viewport height, actually. – Augustinaaugustine

Answer 2

@media print{
  body,html{
  height:100%;
  min-height:100%;
  background:#ccc;
  }
}

Luminance

Answer 3

I was not able to get any of the other answers to work. However, since I could calculate the number of pages, I could get close by abusing the viewport height.

This only worked in Chrome, which was enough for my use case. In other browsers, I just hid the background.

@media print {
  @media (-webkit-min-device-pixel-ratio:0) {
    body {
      height: 400vh;
    }
  }
}

This solution leaves a little bottom margin on the page, even when the bottom margin is set to 0. I could live with this for my use case.

Lumbricoid

Answer 4

Apply it like below

     @media print { 
       body, html{
         height: 100%;
         min-height:100%;
         background: #CCC; 
       }
     }

Harned

Hi i follow the code correction but Chrome and Safari still does not show the background to full screen. – Thermomagnetic