Question

我想在我的toc中隐藏我的页脚的一部分，所以我在subst（）函数中执行以下操作：

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

这或多或少有效：我想要隐藏的页脚部分成功消失。但我的底部间距发生了变化，请参阅附件。如何为页脚设置固定的底部间距？（我已经尝试过选项-B，但它没有工作）

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

页脚我想在toc中使用（没有上面的文字），但这里底部间距增大：

附加信息：我可以将此文本绘制为白色而不是设置display：none，但这对我来说没有选择（因为我真的需要这些页面上的额外空间）

编辑：只是为了确保：这是我在我的toc页面上所期待的：再说一遍：我想用内容填充额外的空间（在线上方），因此绘制文本白色不是一个选项。

EDIT2：很抱歉没有提及它，但我认为很清楚：我通过选项footer footer.html添加页脚

EDIT3：谢谢大家的答案，但我发现，如果我使用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;
}

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想要从底部等10毫米的边距，请将-B设置为20并将height的{{1}}设置为.container

Answer 2

＆＃34;粘性页脚的最佳描述＆＃34;发布于＆＃34; Sticky Footer: Five Ways＆＃34;。这不是你想要解决的问题，但可能会有所帮助。

另一种可能有用的方法是为您的TOC页面定义不同的页脚。您可以通过稍微修改wkhtmltopdf – Add Header or Footer to only First or Last Page

中的代码来执行此操作

通常，使页脚附加到页面底部的最简单和最简单的方法是使用position: absolute; bottom:0;当然，这使得您有责任防止身体溢出页脚。

希望这有帮助。

wkhtmltopdf：更改页脚时页脚间距太大

2 个答案: