使用wkhtmltopdf转HTML为PDF时position: running(header)属性值无效

你的判断完全准确：

• position: running() 以及 @top-center/@bottom-center 这类CSS分页媒体（Paged Media）标准的页边距盒规则，wkhtmltopdf底层使用的Qt WebKit渲染引擎根本没有实现支持，不管换哪个版本都用不了这套写法。
• 你代码里还存在一处笔误：@top-center 规则中写的是 content: element(footer)，就算渲染器支持这套属性，最终页眉位置也会错误显示页脚内容。
• 普通浏览器预览看不到效果也属于正常情况，目前主流桌面浏览器对这套打印分页CSS的支持都非常有限，Chrome至今没有实装running元素定位的相关逻辑。

wkhtmltopdf实现跨页重复页眉页脚有两种经过验证的稳定方案，选其中一种即可：

方案1：使用wkhtmltopdf原生页眉页脚参数（稳定性最高，推荐） #

这是官方原生支持的方案，直接通过命令行参数指定单独的页眉、页脚页面即可，不需要在正文HTML里写特殊的定位样式：

• 核心命令参数：
  • --header-html <页眉文件路径/本地地址>：指定页眉内容
  • --footer-html <页脚文件路径/本地地址>：指定页脚内容
  • 配合--margin-top/--margin-bottom给页眉页脚预留足够的显示空间，避免和正文重叠
• 页眉/页脚HTML里可以直接使用wkhtmltopdf自动替换的内置变量，不需要额外写JS计算：
  • [page]：当前页码
  • [topage]：文档总页数
  • [date]：PDF生成时间
  • [title]：文档标题
• 调用示例：

wkhtmltopdf --orientation Landscape --margin-top 20mm --margin-bottom 20mm --header-html ./header.html --footer-html ./footer.html content.html output.pdf

使用这个方案时，把你之前写的@page里的页眉页脚规则、running定位样式全部删掉即可，避免干扰布局。

方案2：同文件内使用fixed固定定位（无需拆分文件） #

如果不想把页眉页脚拆成单独的文件，可以直接用CSS固定定位实现，wkhtmltopdf渲染打印页时会自动把fixed定位的元素在每一页重复展示：

<style>
    @page { 
        size: A4 landscape; 
        /* 上下边距预留出页眉页脚的高度 */
        margin: 2cm 0.5cm; 
    }
    .header { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; 
        height: 1.5cm;
    }
    .footer { 
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%; 
        height: 1.5cm;
    }
    main {
        /* 正文内边距避开页眉页脚位置，防止内容重叠 */
        padding-top: 1.5cm;
        padding-bottom: 1.5cm;
    }
</style>

<div class="header" id="headerContent" >
    It's header
</div>
<div class="footer" id="footerContent">
    It's footer
</div>
<main> 
Content
</main>

注意：使用这个方案时不要把页眉页脚元素放在设置了overflow: hidden的容器内，否则会导致跨页重复渲染失效。

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