page .js页面内容:页脚只出现在最后一页，顶部标题工作

Question

大家好，

我使用page .js我在每个页面上都添加了顶部标题，但这种方法不适用于页脚。我想过少一个分号。

https://jsfiddle.net/aldari/sy3pb7a2/6/

@page {
@top-center {
content: element(repeatable);
}

@bottom-center {
content: element(footerblock);
}

border: 1px solid black;
}
.repeatable {
display: block;
position: running(repeatable);
}
.footerblock {
display: block;
position: running(footerblock);
}
.page1,
.page2,
.page3 {
break-before: page;
}

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<div class="wrapper">
<div class="repeatable">
<div class="">header</div>
</div>
<div class="page1">page 1 content</div>
<div class="page2">page 2 content</div>
<div class="page2">page 3 content</div>
<div class="footerblock">
<div class="">footer</div>
</div>
</div>

Answer 1

我遇到了相同的报告:元素(footer)"分页媒体只出现在最后一页

答案是:将页脚内容放在主内容之前，就像在标题中一样。重复块是从主流程中提取的，但是直到最后一个页面才为页面定义，所以它应该出现在乞求中，在主内容之前。

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<div class="wrapper">
<div class="repeatable">
<div class="">header</div>
</div>
<div class="footerblock">
<div class="">footer</div>
</div>
<div class="page1">page 1 content</div>
<div class="page2">page 2 content</div>
<div class="page2">page 3 content</div>
</div>