html - wkhtmltopdf:更改页脚时页脚间距太大

Question

我想在目录中隐藏页脚的一部分，因此我在 subst() 函数中执行以下操作:

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

这或多或少有效:我想隐藏的页 footer 分成功消失。但我的底部间距改变了，请参阅附件。如何为页脚设置固定的底部间距？ (我已经尝试过选项 -B 但它不起作用)

带有一些文本和正确底部间距的原始页脚:

页脚我想在目录中使用(没有上面的文本)，但这里底部间距增加:

其他信息:我可以将此文本绘制为白色，而不是设置显示:无，但这对我来说没有选择(因为我确实需要这些页面上的额外空间)

编辑: 只是为了确保:这就是我在目录页面上所期望的: 再说一遍:我想用内容填充额外的空间(行上方)，因此不能选择将文本绘制为白色。

编辑2: 抱歉没有提及，但我认为很清楚:我通过选项 footer footer.html

添加页脚

编辑3: 谢谢大家的回答，但我刚刚发现，如果我使用 footer.html 中的页脚，那么它将始终在页面底部占用相同的空间。因此，即使我将页脚放在页面的最底部 - 我的内容也不会扩展到该点。

Answer 1

您的 HTML 必须是表格 ( <table> )。 创建任意数量的行，然后在最后一行添加 css vertical-align: bottom 。 不要忘记设置table高度与 PDF 纸张尺寸相同(无边距)。

示例:如果您的 PDF 尺寸为 A4，则按照下一个示例操作:

<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;
}

示例

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

如果你想要距底部等10mm的边距，设置-B到 20 和 height的.container设置为287mm