CODEWITHSUNDEEP
htmlcsswkhtmltopdf
Munchkin
Munchkin

Reputation: 4946

wkhtmltopdf: footer-spacing is too big when footer is changed

I want to hide a part of my footer in my toc, so I do the following inside the subst() function:

if(vars['section'] == ""){document.body.className="hide-footer-text";}

This works more or less: The part of my footer I want to hide, disappears successfully. But my bottom-spacing changed, see attachments. How can I set a fixed bottom spacing for my footer? (I already tried option -B but it didn't work)

original footer with some text and correct bottom spacing: enter image description here

footer I want to use in toc (without the text above) but here the bottom spacing grows: enter image description here

Additional Info: I could draw this text white instead of setting display:none, but that's no option for me (because I really need the additional space on these pages)

Edit: Just to make sure: This is what I'm expecting on my toc-pages: enter image description here And again: I want to fill the additional space (above the line) with content, so draw the text white isn't an option.

Edit2: Sorry for not mentioning it, but I thought it was clear: I add the footer via option footer footer.html

Edit3: Thank you all for your answers, but I just found out, that if I use a footer from footer.html, then it will always claim the same space at the bottom of the page. So even if I place my footer at the very bottom of my page - my content won't be expanded to that point.

Upvotes: 2

Views: 3462

Answers (2)

Wahhabb
Wahhabb

Reputation: 19

The best description of "sticky footer" is posted at "Sticky Footer: Five Ways". It is not exactly the problem you are trying to solve, but may be helpful.

Another likely useful approach is to define a different footer for your TOC page. You can do this by slightly modifying the code found at wkhtmltopdf – Add Header or Footer to only First or Last Page

In general, the simplest and easiest way to make a footer attach to the bottom of a page is to use position: absolute; bottom:0; Of course, that makes it incumbent on you to keep the body from overflowing the footer.

Hope this helps.

Upvotes: 1

Dave
Dave

Reputation: 2900

Your HTML must be table (<table>). Create rows as many as you want and then, on the last row add a css vertical-align: bottom. Don't forget to set the table height the same as PDF paper size (without margins).

Example: If your PDF is an A4 size, then follow the next example:

<table class="container">
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>content</td>
    </tr>
    <tr>
        <td class="bottom">Footer at bottom</td>
    </tr>
</table>

CSS

.container {
    width: 210mm;
    height: 297mm; /* if you set -B and -T to 0 */
}

.bottom {
    vertical-align: bottom;
}

Example

.container {
    width: 210mm;
    height: 297mm; /* if you set -B and -T to 0 */
    border:1px solid silver;
    box-shadow: 1px 1px 5px #ddd;
    background: #fff;
}

.bottom {
    vertical-align: bottom;
}

body {
    background: #ccc
}
<table class="container">
    <tr>
        <td valign="top">Paper A4</td>
    </tr>
    <tr>
        <td>content</td>
    </tr>
    <tr>
        <td class="bottom">Footer at bottom</td>
    </tr>
</table>

If you want margin from bottom etc 10mm, set -B to 20 and height of .container set to 287mm

Upvotes: 1

Related Questions