[SOLVED] Wkhtmltopdf footer not rendering with position

Wkhtmltopdf footer not rendering with position

With this in my html, the footer won't render in the pdf...

    <!DOCTYPE html>
<html>

<head>
  <style>
  footer{
background:#ccc;
position:absolute;
bottom:0;
width:100%;
padding-top:50px;
}
</style>
</head>

<body>
  <footer>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
  </footer>
</body>

</html>

It works when position is not specified...

To generate the pdf i'm using pdfkit with python:

pdfkit.from_file(content_url, 'out.pdf', {        
        '--footer-html': footer_url,
        '--footer-spacing':  '10'
    })

Here is the content I use in content_url

<!DOCTYPE html>
<html>

<head>

</head>

<body>
<p> content </p>
</body>

</html>

Any help ?

Solution

You need to specify the body's height on the footer html to get it visible using positioning (like in other webpages).

Using the code below you get variabile height footer aligned to page bottom edge. Note: bottom margin must be specified when you call wkhtmltopdf, using --margin-bottom option.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            line-height: 1;
            font-size: 12pt;
            height: 20mm; /* set it to your bottom margin */
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="footer">test <b>html</b> footer<br/><i style="color:blue;">two lines</i></div>
</body>
</html>

Tested on wkhtmltopdf 0.12.4 (with patched qt).