IText7 html2pdf 使用 CSS 固定页脚答案

【问题标题】：IText7 html2pdf fixed footer using CSSIText7 html2pdf 使用 CSS 固定页脚
【发布时间】：2019-12-26 01:25:25
【问题描述】：

我目前正在尝试使用 itext7 和 itext7.pdfhtml 将 HTML 转换为 PDF，但有一个小问题。

我有一个固定的页脚 (.footer)，它在使用浏览器打开时效果很好，但是当使用下面的代码进行转换时，div 没有固定在页面底部。 div 位于它之前的其他 div 内容之后。

C#.net核心代码

string fullBody = System.IO.File.ReadAllText("index.html"); 
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false); 
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head>
<body> 
    <div class="header">
        <img src="header1.bmp" width="100%" />
        <img src="header2.bmp" width="100%"/>
    </div>
    ... 
    <div class="footer">
        Fixed footer
    </div>
</body>
</html>

CSS

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;  
    text-align: center;
}

已经尝试了其他几个例子，但它仍然不会停留在底部。

即使是这个类似的问题Similar question 也不起作用

任何帮助将不胜感激。

在 PDF 中

在浏览器中（打印视图）

请注意 - 此 pdf 只有一页，因此可能会考虑使用硬编码解决方案。

【问题讨论】：

标签： html css itext itext7 html-to-pdf

【解决方案1】：

页脚属于页边距区域。 @page media 是配置它的正确方法。 CSS running 元素功能可用于将元素放入所需的位置，并将其从布局的其余部分中排除。将 HTML 转换为基于页面的表示的主要工具都支持它。

这是一个示例 HTML：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #footer {
                position: running(footer);
            }

            @page {
                @bottom-center {
                    content: element(footer);
                }
            }
        </style>
    </head>

    <body>

        <p>Hello world</p>

        <div id="footer">I am a footer</div>

    </body>
</html>

结果如下所示：

【讨论】：

多么巧合，刚刚解决了它，就像你发布的一样。在 @Page 中有 margin-bottom:0 之前，它以某种方式隐藏了页脚！！