1

我试图用 Dompdf 库以 pdf 格式制作报告。我用这段代码添加了页眉和页脚

.footer {
    position: fixed;
    bottom: 0px;
    height: 30px;
    background-color: #333399;
}
.header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 116px;
    background: url('http://ibadep.local/img/header2.png') no-repeat;
}

并且它们正确出现在所有页面上。

在页面内部，我有一个显示大量信息的表格（一个 php foreach），当表格变得非常大时，trs 出现在第一页的页脚和第二页的页眉后面。我不想要这个，我想要当 tr 到达页脚附近时，页面被打破，下一行显示在页眉下方，而不是像现在发生的那样落后。

我已经用page-break-beforeandpage-break-after属性尝试了很多东西，但都没有奏效。我能做些什么？？？

4

1 回答 1

1

您需要设置页边距。这将防止页面内容呈现在为页眉和页脚分配的空间中。

@page { 
    margin: 120px 50px 35px 50px; 
}

您还需要将topon your设置header为负值以将元素推到边距之外。这同样适用于页脚。

top: -90px

您可以通过将下面的代码粘贴到DOMPDF Demo中来测试它

<html>
<head>
<style>
@page {
    margin: 120px 50px 80px 50px; 
}
#footer {
    position: fixed;
    bottom: -50px;
    height: 30px;
    background-color: #333399;
}
#header {
    position: fixed;
    top: -100px;
    width: 100%;
    height: 116px;
    background: url('http://ibadep.local/img/header2.png') no-repeat;
}
/* Type some style rules here */

</style>
</head>

<body>
<div id="header">
    This is the header
</div>
<div id="footer">
    This is the footer
</div>

<table>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
</table>
<!-- Type some HTML here -->

</body>
</html>
于 2013-07-30T19:42:56.153 回答