wkhtmltopdf page-break-before div have whitespace in new page, div not shown

Question

I am generating a PDF with wkhtmltopdf from a generated html-file. I use the latest wkhtmltopdf version (0.12.2.0) for windows.

My additional wkhtmltopdf parameters are:

--zoom 1.0
--encoding "UTF-8"
--page-offset -1
--footer-html "C:\tmp\footer.html"
--header-html "C:\tmp\header.html"
--header-spacing 10
--footer-spacing 10 toc
--xsl-style-sheet "C:\tmp\toc.xsl"

In the footer.html, header.html, toc.xsl are nothing defined about page-breaks. The HTML is valid. Every tag which is opened is closed in the right order. I've checked it twice.

If I insert a page-break-after div all works fine. But I need a page-break-before too. If I insert a page-break-before div it breaks the page too, but on the new page there is a block of white space and the div is not shown.

<div style='page-break-before: always; height: 10px; width: 100%; background-color: red;'>
 <span style='color:rgb(0, 0, 0)'>OOO</span>
</div>

It doesn't matter if this style properties are set or not: "height: 10px; width: 100%;"

The two pages should look like:

+--------------------+
|                  1 |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
+--------------------+
-
+--------------------+
|                  2 |
|   OOOOOOOOOOOOOO   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
|                    |
+--------------------+

But they look like (div not shown and a large whitespace on next page):

+--------------------+
|                  1 |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
+--------------------+
-
+--------------------+
|                  2 |
|                    |
|                    |
|                    |
|                    |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
+--------------------+

The x-es are the placeholders for the text. The O-s are the placeholder for my div.

I've already tried this from answer 1. wkhtmltopdf page-break-after have whitespace The whitespace is already there.

Update:

In some other of my generated PDFs there are some texts over the other. I don't know why wkhtmltopdf does sometimes some whitespace and sometimes it puts one text over the other but if I set the css attribute:

overflow-x: visible !important;

in my CSS file. Then in the PDF there is no more senseless whitespace and there is no more one text over the other, but then it makes no more page-breaks.

Solution:

The main problem was, that the html I received from an other tool to put it in the wkhtmltopdf-tool was so complex with many div blocks and useless html-tags, that the wkhtmltopdf-tool made this error. With a cleaned html it works perfect.

Oleg G Oleg G · Accepted Answer · 2017-04-06T21:38:46

After hours of trying to fix a similar problem, I have found that the solution is to put the pages immediately in the body

<body>
<div style="page-break-inside: avoid;"> Here goes my page </div>
<div style="page-break-inside: avoid;"> Here goes my another page </div>
....
</body>

Another caveat is that if the content is larger than the page - the resulting PDF breaks. It is like with the cats - "if it fits - it sits" :)

Try to move content between pages to see if it fits.

wkhtmltopdf page-break-before div have whitespace in new page, div not shown

2 Answers