我尝试在从Chrome打印时为整个打印页面设置纯色背景色。页面上的内容是一个长度未知的动态列表，可能跨越多个页面。
为了删除白色边距，我使用@page规则将边距设置为0 mm。
有两个问题我没有找到解决办法。
1.无法为后续页面上的内容设置上边距
1.无法用纯色填充最后一页到底部
我得到了什么：
<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）：x1c 0d1x
1条答案
按热度按时间mbzjlibv1#
我目前遇到了和你一样的问题。我已经找到了第二部分的解决方案，你可以在这里阅读：
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
对于我在puppeteer中解决的第一个问题（我使用它来创建页面的PDF版本，通过在引擎盖下由Google“打印”），通过使用库的页眉和页脚属性，在转换/打印HTML到PDF时，每个页面上都有内容的边距，但没有背景