CODEWITHSUNDEEP
csswkhtmltopdf
mikeyy
mikeyy

Reputation: 933

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).

Upvotes: 1

Views: 1118

Answers (2)

mikeyy
mikeyy

Reputation: 933

I marked Ishmaeel reply as correct answer as I think his suggestion is the most correct, although I do not like to be forced to use separate files for footer/header. I do like the options, not necessarily obligation.

However, for me, at least until I find time to do it properly, the problem was solved by removing

<!DOCTYPE html>

That did the trick without any changes to my logic.

Upvotes: 2

Ishmaeel
Ishmaeel

Reputation: 14383

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

Upvotes: 1

Related Questions