内容与 PDF 第二页上的页眉重叠答案

【问题标题】：Content overlapping with header on second page of PDF内容与 PDF 第二页上的页眉重叠
【发布时间】：2020-10-28 01:33:49
【问题描述】：

我正在使用具有动态内容的 Freemarker 生成 PDF。它可以是单页 PDF 或多页 PDF，具体取决于从外部资源获取的内容。
我目前面临的问题是多页场景。第二页的内容与页眉重叠。

.ftl 文件

<html>
<head>
 <style>
   <#include "customStyles.css"/>
   @page {
       margin: 36px 36px 36px 36px;
       size: landscape; 
       @top-center {content: element(header)}
   }
   #header {position: running(header);}
 </style>
</head>
<body>
  <div id="header">
    <div class="headerText">Header Text</div>
    <hr style="width: 100%"/>
 </div>
 <div class="content">
  <#list fields?keys as key>
    <label for="key">${key}</label>
    <span id="key">${fields[key]}</span>
  </#list>
 </div>
</body>
</html>

customStyles.css 文件

#header {
  position: fixed;
  width: 100%;
  top: 0;
}
.headerText {
 font-size: 17px;
 color: #000000;
}
hr {
 display: block;
 height: 2px;
 border: 0;
 border-top: 2px solid #000000;
}
.content {
  margin-top: 20px;
  page-break-inside: avoid;
}

pdf 的第一页完美显示，页眉位于页面顶部，其内容位于其下方。但是，当字段列表大得多以适合单个页面时，内容会与第二页上的标题重叠。

我已尝试从以前帖子中接受的答案中遵循以下方法。不幸的是，它们不适用于多页场景。

为主体添加了顶部填充。

body {
 padding-top: 50px;
}

为页眉提供了 40 像素的高度，但未按预期工作。

#header {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

页面上边距增加。

 @page {
        margin-top: 50mm; 
}

P.S.：请不要将此问题作为重复问题关闭。我找不到任何可以正确显示内容而不在第二页上重叠的解决方案。

【问题讨论】：

标签： html css pdf freemarker

【解决方案1】：

您是否尝试过使用 z-index？

像这样使用它。

z-index: 1; 这是一个 CSS 标签。它的作用是停止重叠。它像层。当您使用 z-index 时，它会将其放在屏幕的顶层。

【讨论】：

添加 z-index 并没有停止与第二页上的标题重叠内容。