我试图在从 Chrome 打印时为整个打印页面设置纯色背景。页面上的内容是一个未知长度的动态列表，可能跨越多个页面。
为了去除白边，我使用@page 规则将边距设置为0 毫米。
有两个问题我还没有找到解决方案。
- 无法为后续页面的内容设置上边距
- 无法用纯色填充最后一页到底部
我得到的:
<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):
最佳答案
我现在遇到了和你一样的问题。我已经找到了第二部分的解决方案，您可以在此处阅读:
Have margins for content but not background on every page when converting/printing HTML to PDF
这里:
https://stackoverflow.com/a/70079034/1222240
你必须创建一个位置为固定的div，然后宽度和高度为100%，设置z-index为0，然后你可以改变背景颜色，它会打印在每一页上
容器 div 需要有 position: relative 和 z-index: 1
第一个问题还没有找到解决方案
关于html - CSS 在打印中创建整页无边距纯色背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61582214/