使用飞碟生成 PDF 时，标题与正文重叠答案

【问题标题】：When generating a PDF with Flying Saucer the header overlaps with the body使用飞碟生成 PDF 时，标题与正文重叠
【发布时间】：2014-01-21 08:54:22
【问题描述】：

我正在使用 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 如下所示：

谁能帮我找到一个解决方案，让我的标题不与正文的其余部分重叠？

【问题讨论】：

请将图片直接添加到问题中，而不是链接中。
很抱歉，我没有必要的声誉将图片直接添加到问题中。

标签： java flying-saucer

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果其他人也有同样的问题，我找到了适合我的不同解决方案。

页眉和页脚设置在页边距内。所以解决方法是增加页面上边距，例如：

@page {
        margin-top: 50mm; 
}

这个解决方案是从这个答案复制而来的：https://stackoverflow.com/a/31470840/1271573

【讨论】：

【解决方案3】：

只需尝试通过 CSS 向您的 <div class="section"></div> 添加边距/填充。这应该可以解决问题。

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

【讨论】：

向我的 div 添加边距或填充没有帮助，因为它只计算一次（在第一页中）。