Question

我正在使用Flying Saucer R8生成PDF文件。 PDF需要一个标题，将在每个页面上重复。标题将由用户指定，因此我无法确定它的高度。我设法在每个页面上重复标题，但问题是如果标题有多行文本，它不会动态重新调整正文的高度，最终会重叠它。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
@page {
    size: 4.18in 6.88in;
    margin: 0.25in;
    @top-center {content: element(header);}
}
#header {
    color: red;
    display: block;
    position: running(header);  
}

</style>
</head>
<body>
    <div id="header">
        <-- Lots of text here --> 
    </div>
    <div class="section">
        <-- Lots of text here -->   
    </div>
</body>
</html>

使用Flying Saucer生成后生成的PDF如下所示：

enter image description here

任何人都可以帮我找一个解决方案，让我的头部不与身体的其他部分重叠吗？

Answer 1

如果其他人遇到此问题，我设法找到了解决方法。要动态计算PDF中标题的大小，请忘记CSS运行标题，而是将整个页面设为HTML表格，并将标题放在thead部分中。使用以下CSS规则在每个页面上重复thead：

table {
   -fs-table-paginate: paginate;
}

Answer 2

只需尝试通过css为<div class="section"></div>添加保证金/填充。这应该可以解决问题。

标题重叠，因为它未定位为页面上的所有其他元素。它是running element，在打印模式下以特殊方式处理。所以你必须确保，如果这些元素出现在页面的任何地方，就有足够的空间。

Answer 3

如果其他人遇到相同的问题，我找到了一个对我有用的解决方案。

页眉和页脚在页边距内建立。因此解决方案是增加页面的上边距，例如：

@page {
        margin-top: 50mm; 
}

此解决方案是从以下答案中复制的：https://stackoverflow.com/a/31470840/1271573

使用Flying Saucer生成PDF时，标题与正文重叠

3 个答案: