VF Pages中PDF第2、3页正文重叠，需统一各页与logo间距

核心问题原因 #

• 未定义页面上下边距，内容超出页面范围时，后续页面内容会与前一页重叠
• 缺少统一的页眉（logo）布局规则，导致不同页面的logo与正文间距不一致

修正后的完整代码示例 #

<HTML>
    <HEAD>
        <style type="text/css" media="print">
            @page {
                font-family: 'Arial Unicode MS' !important;
                /* 统一所有页面边距，顶部预留logo空间 */
                margin-top: 15mm;
                margin-bottom: 10mm;
                margin-left: 5mm;
                margin-right: 5mm;
                /* 绑定logo到页面顶部 */
                @top-center {
                    content: element(logo-header);
                }
            }

            /* 固定logo容器，确保每页都显示且间距统一 */
            #logo-header {
                position: running(logo-header);
                margin-bottom: 5mm; /* 控制logo与正文的间距 */
                text-align: left; /* 可根据需求调整logo对齐方式 */
            }

            /* 强制分页，避免内容跨页重叠 */
            .page-break {
                page-break-after: always;
            }

            /* 禁止块内容跨页拆分 */
            .no-break {
                page-break-inside: avoid;
            }
        </style>
    </HEAD>
    <BODY>
        <!-- 全局logo区域 -->
        <div id="logo-header">
            <img src="{!$Resource.YourLogo}" alt="Logo" style="height: 8mm;" />
        </div>

        <!-- 正文内容，添加防跨页拆分类 -->
        <div class="no-break">
            <!-- 此处插入你的正文内容 -->
        </div>

        <!-- 手动分页标记（按需添加） -->
        <div class="page-break"></div>
    </BODY>
</HTML>

关键调整点说明 #

• 统一页面边距：通过@page设置全局上下左右边距，顶部边距预留logo位置，确保所有页面布局一致
• 固定logo布局：使用running元素将logo绑定到每页顶部，通过margin-bottom精准控制logo与正文的间距
• 解决内容重叠：添加分页控制样式，强制长内容在指定位置分页，同时禁止块元素跨页拆分，彻底避免页面内容重叠

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