Target:为动态生成的 pdf 提供最多 8 厘米的边距，每页都有重复的页眉和页脚。
当前的问题：虽然我可以给pdf留出边距，并且内容在第一页上正确对齐，但从第二页开始，正文内容开始与页面标题重叠，
第 2 页及以后 - 问题
How it SHOULD LOOK LIKE
我尝试过的：尝试了相关问题的解决方案，例如：-内容与 PDF 第二页上的页眉重叠 https://stackoverflow.com/questions/62781259/content-overlapping-with-header-on-second-page-of-pdf and 打印/PDF 时表格标题重叠在第二页上 https://stackoverflow.com/questions/67463956/table-headers-overlapping-on-second-page-when-printing-pdf还有其他的，但它们似乎都不起作用。
Code:-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>Document</title>
<style>
/* Styles go here */
@media print {
* {
-webkit-print-color-adjust: exact !important;
}
}
* {
font-family: "Mulish", sans-serif;
}
.section-padding {
padding-bottom: 20px;
}
.table > :not(:last-child) > :last-child > * {
border-bottom-color: inherit;
}
strong {
font-weight: 700 !important;
}
.page-header,
.page-header-space {
height: 250px;
}
.page-footer,
.page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
}
.page {
page-break-after: always;
}
@page {
margin: 5cm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
body {
margin: 0;
}
table {
page-break-inside: auto;
}
tr,
div {
page-break-inside: avoid;
page-break-after: auto;
}
}
</style>
</head>
<body>
<div class="page-header">
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
</div>
<div class="page-footer">
Footer
</div>
<table style="padding: 0; margin: 0; width: 100%;">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="page" style="color: green; font-weight: bold;">
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected] /cdn-cgi/l/email-protection/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"
></script>
</body>
</html>PS：仅当边距超过 1.5 厘米时，该问题才会重现，如果任何其他第三方工具或任何其他方式可以实现目标，请随时分享。
谢谢你！
经过大量资料搜索后，最后我可以得出结论，随着页边距的增加，可以赋予页眉的最大值即<thead>减少。
例如，
等等。
.page-header,
.page-header-space {
height: 250px;
}需要补充的一点是，给出的值不是严格的值，会根据您的用例而变化，但通过根据边距值改变标头大小，可以实现问题中给出的目标。