内容与PDF第二页上的页眉重叠 [英] Content overlapping with header on second page of PDF
本文介绍了内容与PDF第二页上的页眉重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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;
}
我已经尝试了以下方法，根据之前帖子中被接受的答案。遗憾的是，它们不适用于多页方案。
- 已向正文添加顶部填充。
body {
padding-top: 50px;
}
- 为页眉提供了40px的高度，但未按预期工作。
#header {
position: fixed;
width: 100%;
top: 0;
height: 40px;
}
- 增加页面上边距。
@page {
margin-top: 50mm;
}
附注：请不要重复结束此问题。我找不到在第二页上正确显示内容而不重叠的任何解决方案。
推荐答案
您尝试过使用z索引吗？
这样使用它。
z指数：1； 这是一个css标签。它所做的就是停止重叠。就像一层一层的。当您使用z-index时，它会将其放在屏幕的顶层。
这篇关于内容与PDF第二页上的页眉重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
