I am generating a PDF using pdfkitjs which connects to wkhtmltopdf
when generating my pdf white space/white div is inserted where the pagebreak happens
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tilmeldingskursus</title>
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="academy.css">
<link rel="stylesheet" type="text/css" href="font.css">
<style type="text/css">
body {margin: 0; padding: 0; position: absolute; width: 100%; background-color: #fff}
.w-half {width: 50%;}
.panel {margin-bottom: 20px; background-color: #fff; border: none; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}
.wrapper {background-color: #f0f3f4;}
.float-left {float: left;}
.text-right {text-align: right!important;}
.img-circle {border-radius: 50%;}
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
.table-container {
border-collapse: collapse;
width: 100%;
}
.table-row:nth-of-type(odd) {
background: #ffffff;
}
.table-row:nth-of-type(even) {
background: #f0f3f4;
}
.table-row {
overflow: hidden;
padding: 18px 0;
width: 100%;
}
.table-cell {
float: left;
}
.table-cell-1 {
width: 8%;
margin-left: 3%
}
.table-cell-2 {
width: 15%;
}
.table-cell-3 {
width: 14%;
margin-left: 3%;
}
.table-cell-4 {
width: 19%;
margin-left: 3%;
}
.table-cell-5 {
width: 32%;
margin-left: 3%
}
}
</style>
</head>
<body>
<div class="wrapper b-a">
<div class="wrapper-lg b-a b-dashed">
<div class="row" style="height: 50px;">
<div class="w-half float-left">
<img src="<%= encodeURI(organization.logo) %>" alt="" class="w-md" />
</div>
<div class="w-half float-left text-right">
<%= course.now %>
</div>
</div>
<div class="row">
<h3 style="margin: 0;">Kursus: <%= course.name %></h3>
<p class="page-breaker">
Lokation: <%= course.location %>
<br>
Dato: <%= course.date %>
<br>
Tidspunkt: <%= course.start_time %> - <%= course.end_time %>
</p>
<div class="panel panel-default">
<div class="panel-heading" style="padding: 15px;">
<h2 class="h2 text-u-c font-thin">Deltagerlist</h2>
</div>
<div class="table-container">
<% for(var i = 0; i < users.length; i++) {%>
<div class="table-row avoid">
<div class="table-cell table-cell-1"><span class="thumb-sm"><img src="<%= encodeURI(users[i].image_path) %>" alt="" class="img-circle" /></span></div>
<div class="table-cell table-cell-2"><%= users[i].profile.firstname %> <%= users[i].profile.lastname %></div>
<div class="table-cell table-cell-3"><%= users[i].title.name %></div>
<div class="table-cell table-cell-4"><%= users[i].division.name %></div>
<div class="table-cell table-cell-5"><%= users[i].username %></div>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
pdf example 1
pdf example 2
I am looking for a way to make the remaining whitespace before the page break transparent
