动态生成PDF时页面内边距与背景全覆盖兼容问题求助

核心思路是放弃通过@page设置边距，拆分处理需求：用伪元素实现全屏页面背景，用内容容器控制内边距，既满足背景全覆盖的设计要求，又保证跨页内容的内边距一致。

具体实现步骤 #

1. 设置基础页面规则
   将@page的边距设为0，确保背景元素能铺满整个页面，同时定义好页面尺寸（以A4为例）：

   @page {
     size: A4;
     margin: 0; /* 清除页面默认边距，让背景无死角覆盖 */
   }
   

2. 添加全屏背景
   利用body的伪元素生成绝对定位的背景层，尺寸与页面完全匹配，置于内容下方：

   body {
     margin: 0;
     padding: 0;
     position: relative;
   }
   
   body::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 210mm; /* A4宽度 */
     height: 297mm; /* A4高度 */
     background-color: #f5f5f5; /* 替换为你的设计背景色 */
     z-index: -1;
     page-break-after: avoid; /* 确保每个分页都生成独立背景 */
   }
   

3. 控制内容内边距
   给所有动态内容包裹一个容器，通过容器的padding设置内容与页面边缘的距离，同时避免内容在容器内被分页截断：

   .content-wrapper {
     padding: 2cm; /* 按需调整内边距大小 */
     page-break-inside: avoid;
   }
   
   .content-wrapper > * {
     page-break-inside: avoid; /* 防止内部元素被分页拆分 */
   }
   

效果说明 #

• 背景伪元素会跟随每个分页生成，完全覆盖页面宽高，满足密集型设计的背景要求；
• 内容容器的padding会作用在每一页的内容上，即使内容溢出到下一页，新页面的内容依然保持统一内边距，不会出现贴边问题；
• 无需依赖@page的边距设置，规避了背景被裁剪的问题。

内容的提问来源于stack exchange，提问作者Volkan Korkmaz