CSS для создания полной страницы без полей solid цветной фон при печати - PullRequest
Новая
       18

CSS для создания полной страницы без полей solid цветной фон при печати

0 голосов
/ 04 мая 2020

Я пытаюсь установить solid цвет фона для всей напечатанной страницы при печати с Chrome. Содержимое на странице представляет собой динамический список c неизвестной длины, который может занимать несколько страниц.

Чтобы удалить белые поля, я установил поля на 0 мм, используя правило @page.

Есть две проблемы, решение которых я не нашел.

  1. Невозможно установить верхнее поле для контента на последующих страницах
  2. Невозможно заполнить последнюю страницу внизу solid цвет

Что я получил: 

<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>

Рендеринг печати в Chrome (из сохраненного pdf): enter image description here

...