在分页媒体中运行页脚“元素（页脚）”仅出现在最后一页答案

【问题标题】：Running footer "element(footer)" in paged media appear only in last page在分页媒体中运行页脚“元素（页脚）”仅出现在最后一页
【发布时间】：2019-05-26 15:51:39
【问题描述】：

我正在处理页边距框中带有运行页脚的分页 CSS。一切都按预期进行，直到平面设计师要求我将页脚的一部分加粗，我不能再使用 content:"text" 作为页脚。

我决定使用 content:element(footer) 并在动态创建的 html 页面的末尾添加了页脚，但它只显示在最后一页上。我已经搜索过，但似乎每个人都遇到了相反的问题（他们只希望在最后一页上使用它并且全部使用）或者没有使用 CSS3 打印媒体样式。

    @page {
    size: 170mm 240mm;
    margin:  23.5mm 27.5mm 23mm;

    @bottom-center {
       content: element(footer);
        font: normal 8pt MyLucida;
    }
    }
    footer {position: running(footer);
  font-family: MyLucida;
  font-size: 8pt;}

HTML

    <footer>
    My Journal Issue [<b>000</b>] Month Year
    </footer>

我希望在每一页上找到页脚但空白页，但它只出现在最后一页上，在框内的正确位置。将“位置：运行（页脚）”更改为“位置：绝对”并没有改变任何东西。似乎页脚在最后只添加了一次，根本没有重复。我不得不重复这种风格，否则它没有应用它。 html 仅用于打印，它是从 db 数据生成的。我的 pdf 转换器是 PrinceXML。我希望这是有道理的！

【问题讨论】：

也许不是 CSS，而是您动态生成页面的方式？您是否检查过 HTML 以查看页脚是否存在。也许使用相同的 CSS 创建一些静态 html 页面的代码 sn-p 并查看页脚是否出现在至少 2 个或更多页面上的所需位置，如果确实如此，那么它就是您生成页脚的方式。同样在我看来，这些规则的全部意义在于基本上为您定位事物。 hene "top-center".. "bottom-center"... 取出页脚元素的位置属性。

标签： css footer css-paged-media

【解决方案1】：

我自己想通了：问题是我在文件末尾包含了所有内容之后的页脚。如果我只是在开头包含它，它会按预期重复每一页。我在正文的开头移动了页脚，现在它可以工作了！

【讨论】：

也许可以看看我在评论中所说的关于在您使用@bottom-center at-rule 专门用于位置时强制您的页脚元素上的位置。最好不要覆盖 CSS3 为您处理的内容。
这是因为 Prince 在实际读取页脚 HTML 代码之前不会创建页脚流。如您所述，页脚 HTML 应位于文档的开头。在 DocRaptor，我们遇到了很多棘手的 Prince 页脚和页眉问题，并将它们记录在这里：help.docraptor.com/pdf-styling-and-troubleshooting/…。
谢谢@jamespaden，因为我将与他们一起工作，我会做更好的研究！
太棒了！我正在调查这个问题，使用 Paged.js 生成的内容。 @Lila，您的解决方案也符合我的情况
喜欢解决这个问题是多么容易！感谢您的提示。