Search code examples
csswkhtmltopdf

Footer not positioned as expected

I am trying to create a PDF file with wkhtmltopdf. I would like to position a div at the bottom of the page. My environment is Windows 10, wkhtmltopdf 0.12.5

The html

<!DOCTYPE html>
<html>
    <head>                        
        <style>
            .footer {
              position: absolute;
              bottom: 0;
              width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            some text
        </div>
        <div class="footer">
            Footer info
        </div>
    </body>
</html>

Firefox, chrome and edge position the footer at the bottom, however when running the html file using command 

"c:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe"  page.html page.pdf

I get footer right under the "some text" part (even overlaying it a bit) enter image description here ]

What am I doing wrong? I also tried linking css as a separate file, but that did not work either (same result).

Solution

  • Your css positioning for the footer depends on a viewport size, which is the browser's client (window) size. you will realize the footer remains at the bottom of the browser when you resize the window.

    wkhtmltopdf renders the html in a virtual viewport with unspecified size. Since your HTML cannot expand this viewport, it renders as if it's in a browser window with minimum possible height to accommodate your content.

    There is built-in support for header and footer sections in wkhtmltopdf. If you generate the footer content as a separate HTML file, you can use the following command line to put your footer at the bottom of the generated document, which will be A4-sized by default:

    "wkhtmltopdf.exe" --footer-html "footer.html" "input.html" "output.pdf"

    Also search for "header" and "footer" keywords in the documentation to see your options for page layout:

    https://wkhtmltopdf.org/usage/wkhtmltopdf.txt