CODEWITHSUNDEEP
phphtmlcsscakephpdompdf
Heverton Coneglian de Freitas
Heverton Coneglian de Freitas

Reputation: 305

Add page break in css and pdf

I was trying to make a report in pdf with the Dompdf library. I added a header and a footer with this code

.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;
}

and they appeared correctly on all pages.

Inside the page, I have a table that displays a lot of information (a php foreach), and when the table becomes very large, the trs appear behind the footer of the 1st page, and the header of 2nd page. I don't want this, I want that when the tr reaches near the footer, the page is breaked, and the next row show bellow the header, not behind like what's happening now.

I've tried a lot of things with the page-break-before and page-break-after properties, but none of that worked. What can I do???

Upvotes: 1

Views: 8250

Answers (1)

user20232359723568423357842364
user20232359723568423357842364

Reputation: 4634

You need to set the page margin. This will prevent the page content from rendering in the space allocated for the header and footer..

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

You will also need to set the top on your header to a negative value to push the element outside of the margin. The same applies to the footer.

top: -90px

You can test it by pasting the code below into the 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>

Upvotes: 2

Related Questions