在 css 和 pdf 中添加分页符答案

【问题标题】：Add page break in css and pdf在 css 和 pdf 中添加分页符
【发布时间】：2013-07-31 02:39:05
【问题描述】：

我正在尝试使用 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;
}

它们在所有页面上都正确显示。

在页面内部，我有一个表格，显示了很多信息（一个phpforeach），当表格变得非常大时，trs出现在第1页的页脚和第2页的页眉后面.我不希望这样，我希望当 tr 到达页脚附近时，页面被打破，并且下一行显示在页眉下方，而不是像现在发生的那样落后。

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

【问题讨论】：

那么告诉我们你尝试了什么？然后我们可以提出替代建议
这不能解决您的问题，但我建议您在使用页脚和页眉时使用id (#) 而不是class。当您希望一次将特定样式应用于许多元素时，通常会使用类。如果您有其他元素与您编写的具有相同的类，那么您最终会遇到问题。 只是说
使用 CSS 时，不建议为表格元素使用类，最好使用 ID 而不是类。这可能就是为什么它不适合你。我建议你Google“将 CSS 样式应用于 HTML 表格 tr td”只是为了它。它可能会很有帮助。干杯
@Fred 我更推荐使用<header></header> 和<footer></footer>。
@JeffNoel <footer></footer> 当然，<header></header> 没有。那些（标题）是为元、标题等保留的 HTML 标记，包括到 CSS 的链接 rel ;-)

标签： php html css cakephp dompdf

【解决方案1】：

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

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

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

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>

【讨论】：

你在编辑中去掉了footer {中的“#”，有什么特殊原因吗？
听取您的建议，我将
替换为
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持
标签。 Internet Explorer 8 及更早版本，不支持
标签。因此，使用<footer> 标签可能不是一个好主意，最好保留为ID。这样它就可以很容易地被操纵。知道还有人在使用 IE8 及更早版本时，您会感到惊讶。
这是 DOMPDF，它接受页脚标签 - 切换回
因为这是他在示例中使用的内容
IE8及更早版本是否支持DOMPDF？据我所知，不是<footer> 标签。