飞碟页码+页数

Question

我正在尝试为使用 Flying Saucer 生成的 pdf 文档配置漂亮的页脚。但是我在正确定位页码和页数时遇到了问题。

考虑一下 css 的这一点：

div#page-footer {
    position : running(footer);
    // ..  more styling .. //
}
div.page-number:before {
    content: counter(page);
}

使用html的这一点不会给我页码：

<div id="page-footer">
    <div class="page-number"></div>
</div>

如果我将 class 上移一级，这是我设法获得页码的唯一方法。

<div id="page-footer" class="page-number">
</div>

但这不允许我在页脚中添加额外的内容，或者使应用样式变得非常困难。我可以只为页码添加一个单独的页脚，但是很难把位置放在正确的位置。

有没有办法在还包含其他元素和样式的页脚中获取页码 + 页数？

补充说明：

Answer 1

您应该使用 id 而不是 class 来识别包含页码的 div。

这会起作用：

div#page-number:before {
    content: counter(page);
}

<div id="page-footer">
    <div id="page-number"></div>
</div>

flying saucer page number + page count