title: generating pdf with wkhtmltopdf inserts white space at page breaks
body: <p>I am generating a PDF using pdfkitjs which connects to wkhtmltopdf</p>
  
  <p>when generating my pdf white space/white div is inserted where the pagebreak happens</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head lang="en"&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Tilmeldingskursus&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="app.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="academy.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="font.css"&gt;
          &lt;style type="text/css"&gt;
              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%
              }
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper b-a"&gt;
              &lt;div class="wrapper-lg b-a b-dashed"&gt;
                  &lt;div class="row" style="height: 50px;"&gt;
                      &lt;div class="w-half float-left"&gt;
                          &lt;img src="&lt;%= encodeURI(organization.logo) %&gt;" alt="" class="w-md" /&gt;
                      &lt;/div&gt;
                      &lt;div class="w-half float-left text-right"&gt;
                          &lt;%= course.now %&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;h3 style="margin: 0;"&gt;Kursus: &lt;%= course.name %&gt;&lt;/h3&gt;
                      &lt;p class="page-breaker"&gt;
                          Lokation: &lt;%= course.location %&gt;
                          &lt;br&gt;
                          Dato: &lt;%= course.date %&gt;
                          &lt;br&gt;
                          Tidspunkt: &lt;%= course.start_time %&gt; - &lt;%= course.end_time %&gt;
                      &lt;/p&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading" style="padding: 15px;"&gt;
                              &lt;h2 class="h2 text-u-c font-thin"&gt;Deltagerlist&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div class="table-container"&gt;
                              &lt;% for(var i = 0; i &lt; users.length; i++) {%&gt;
                                  &lt;div class="table-row avoid"&gt;
                                      &lt;div class="table-cell table-cell-1"&gt;&lt;span class="thumb-sm"&gt;&lt;img src="&lt;%= encodeURI(users[i].image_path) %&gt;" alt="" class="img-circle" /&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;div class="table-cell table-cell-2"&gt;&lt;%= users[i].profile.firstname %&gt; &lt;%= users[i].profile.lastname %&gt;&lt;/div&gt;
                                      &lt;div class="table-cell table-cell-3"&gt;&lt;%= users[i].title.name %&gt;&lt;/div&gt;
                                      &lt;div class="table-cell table-cell-4"&gt;&lt;%= users[i].division.name %&gt;&lt;/div&gt;
                                      &lt;div class="table-cell table-cell-5"&gt;&lt;%= users[i].username %&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;% } %&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>pdf example 1
  <a href="https://i.stack.imgur.com/Rc9wn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rc9wn.jpg" alt="enter image description here"></a></p>
  
  <p>pdf example 2
  <a href="https://i.stack.imgur.com/EfsE8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EfsE8.jpg" alt="enter image description here"></a></p>
  
  <p>I am looking for a way to make the remaining whitespace before the page break transparent </p>