页脚未按预期定位

Question

我正在尝试使用 wkhtmltopdf 创建 PDF 文件。我想在页面底部放置一个 div。我的环境是Windows10，wkhtmltopdf 0.12.5

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 和边缘将页脚定位在底部，但是当运行使用命令

的 html 文件时

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

我在 "some text" 部分下方找到了页脚（甚至覆盖了一点） ]

我做错了什么？我还尝试将 css 作为一个单独的文件进行链接，但这也不起作用（结果相同）。

Answer 1

您对页脚的 css 定位取决于视口大小，即浏览器的客户端 (window) 大小。当您调整 window 大小时，您会发现页脚仍保留在浏览器底部。

wkhtmltopdf 在未指定大小的虚拟视口中呈现 html。由于您的 HTML 无法展开此视口，因此它呈现为如同在浏览器中 window 一样，并以最小可能高度容纳您的内容。

wkhtmltopdf 内置了对页眉和页脚部分的支持。如果您将页脚内容生成为 separate HTML 文件，您可以使用以下命令行将页脚放在生成文档的底部，这将是 A4-默认大小：

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

同时在文档中搜索 "header" 和 "footer" 关键字以查看您的页面布局选项：

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

Answer 2

我将 Ishmaeel 的回复标记为正确答案，因为我认为他的建议是最正确的，尽管我不喜欢被迫为 footer/header 使用单独的文件。我确实喜欢选择，不一定是义务。

然而，对我来说，至少在我找到时间正确地做之前，通过删除

解决了问题

<!DOCTYPE html>

我的逻辑没有任何改变就成功了。

页脚未按预期定位

Footer not positioned as expected

css

wkhtmltopdf