CSS print not taking background color property in last page-CodePudding

In print, the first page considers background-color property but on the last page, some part of the page is left blank and they are not considering the background-color property. How can I fix it so the whole last page should consider background-color property?

Code:

html {
    -webkit-print-color-adjust: exact;
    background-color: #013126 !important;
}

Image:

Screen shot of page

CodePudding user response：

You need to style the page differently for print media. You can't use style for screen media. And you can't use same style for all media types.
Concept of page is different in printed pages and on screen.
https://www.w3.org/TR/2011/REC-CSS2-20110607/media.html

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

Detailed section on page media: https://www.w3.org/TR/2011/REC-CSS2-20110607/page.html

Following is the minimal example showing how a document can appear different on screen and on print media:


    <html>
      <head>
        <style media="print">
          body {
            color: wheat;  /* this is color of text */
            margin: 0in;
            padding: 0in;
          }
          .page {
            page-break-after: always;
            width: 100%; /* for A4 page you can use width: 8.3in; */
            height: 100%; /* for A4 page you can use height: 11.7in; */
            margin: 0in;
            padding: 0in;
            background-color: #013126;
          }
        </style>
        <style media="screen">
          body {
            color: wheat;
            background-color: rebeccapurple;
          }
          .page {
            border: 1px solid pink;
          }
        </style>
      </head>
      <body>
        <div class="page">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat facere sequi sed
          quasi ea placeat animi, modi non deleniti veniam! Vitae officia sunt, error impedit
          delectus magnam, debitis temporibus ea esse dolores exercitationem magni pariatur.
          Error eius repellendus dolor debitis tempora, aliquam nostrum possimus odio sed,
          eveniet recusandae iure rem officia nihil sapiente commodi quasi necessitatibus
          eaque assumenda optio ipsa consectetur! Nesciunt, quis eligendi? Recusandae facilis
          sed a consequatur, quo sit natus quaerat corrupti voluptatem perferendis deserunt
          similique vitae molestiae qui excepturi, aliquid necessitatibus eveniet dicta,
          ducimus placeat? Sequi temporibus dolore iste recusandae quisquam voluptas sit
          corporis vitae, quos tempora.
        </div>
        <div class="page">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum qui dignissimos,
          inventore accusantium pariatur itaque, voluptatem, assumenda voluptatum praesentium
          id voluptatibus architecto. Dolore quod laboriosam adipisci perferendis dolorum,
          enim repellendus eveniet facilis odit hic totam unde animi voluptatibus quia neque
          optio voluptatum consectetur. Reiciendis, nihil. Dolore est saepe odio id
          voluptates? Deleniti mollitia consequatur praesentium nisi esse quasi quia ad
          consequuntur aut exceaepe, quae ipsum? Optio excepturi recusandae rerum voluptatum
          ulmpore, atque, possimus dolorem! Error ad nisi, numquam facilis velit natus
          cupiditate, esse nam accusamus soluta officia eveniet quos sunt ullam enim nulla
          harum, aliquid cumque iste delectus veniam. Ea voluptatibus nobis dicta facere quo
          natus, assumenda tenetur incidunt! Id sequi at nulla dignissimos unde culpa nihil,
          laudantium, soluta optio, excepturi accusamus numquam tempore voluptates a libero
          dicta iure. Eos beatae illum iure, quae tenetur inventore repudiandae iusto quasi.
          Ipsam deserunt, neque velit distinctio inventore officia iusto. Ipsum assumenda,
          eligendi a consequatur perferendis, possimus dolorum similique delectus aliquam
          numquam voluptatum quidem illum enim ullam odit neque ad, vel dolor? Fugiat quaerat,
          quas itaque nostrum, omnis modi repellat deleniti non vitae incidunt excepturi
          obcaecati consequuntur, molestias cupiditate distinctio ullam adipisci officia
          voluptate ad ab tempora ipsam architecto tempore et! Ipsa, sunt vel. Non placeat
          dicta provident obcaecati itaque quos distinctio unde eius voluptate quia magni,
          dolores error in alias! Atque pariatur recusandae libero quanetur numquam facere,
          aperiam quia odio. Nostrum distinctio labore illo numquam dicta minus animi!
        </div>
      </body>
    </html>

If you print this document from a browser you'll see how it prints diffrently.

CodePudding user response：

Make your html element's height equal to 100vh.

html {
background:red;
width:100vw;height:100vh
}

<html>
  some info and bg color
 </html>