Add header and footer on all PDF pages using iText7 pdfHTML

I am learning how to convert HTML files to PDF using iText7 pdfHTML. So far, I've been able to generate nice PDFs, but now I'm struggling to try to add both a header and a footer to all PDF pages. These header and footer are generated from HTML markup, and they are slightly complex (i.e. some images, tables, or divs, not just plain text). The source HTML is generated by my own code, so I have sort of control over the content of the source files.

I have read the iText book, in particular the chapter about converting HTML to PDF with pdfHTML. Indeed, I could add headers using the @page CSS rules and setting up the MediaDeviceDescription(MediaType.PRINT) to the converter properties. This is the HTML that I'm using for testing:

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

            @page {
                @bottom-left {
                        content: "Page " counter(page) " of " counter(pages);
                }
                @bottom-center {
                        content: element(footer);
                }
                @bottom-right {
                        content: "Page " counter(page) " of " counter(pages);
                }
            }
        </style>
</head>
<body>
<div style="width: 100%; border: 1px dashed black;">
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/>
<div style="background-color: yellow; width: 100%; height: 1200px">&nbsp</div>
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/></p>
</div>
<div id="footer">
<table style="width: 100%; font-size: 12px; line-height: 1;">
<tbody>
<tr>
<td style="text-align: right; width: 50%; padding: 0;">ACME Inc.</td>
<td style="width: 5px; padding: 0;">&nbsp;</td>
<td style="padding: 0;">&nbsp;</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">CIF: 12345678Z</td>
<td style="width: 5px; padding: 0;">&nbsp;</td>
<td style="padding: 0;">https://acme.inc</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">C/Rue del Percebe, 13</td>
<td style="width: 5px; padding: 0;">&nbsp;</td>
<td style="padding: 0;">Tel.: +44 555 123 123</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">45321 Virginia</td>
<td style="width: 5px; padding: 0;">&nbsp;</td>
<td style="padding: 0;">Fax: +44 555 321 321</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">Virginia - USA</td>
<td style="width: 5px; padding: 0;">&nbsp;</td>
<td style="padding: 0;">info@acme.inc</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

As you can see, I'm trying to place the div#footer element at the bottom (center) of all PDF pages. However, despite the fact that both the left and right texts are placed on all page footers, the #footer element only is shown on the last one, and it doesn't fully fit on the page.

This is the code I'm using to generate the PDF from the HTML:

 public MemoryStream CreatePdf()
        {
            MemoryStream pdfStream = new MemoryStream();
            float marginTop = 20, marginRight = 20, marginBottom = 20, marginLeft = 20;

            ConverterProperties converterProps = new ConverterProperties();
            converterProps.SetMediaDeviceDescription(new MediaDeviceDescription(MediaType.PRINT));
            WriterProperties writerProps = new WriterProperties();

            if (Options != null)
            {
                foreach (var option in Options)
                {
                    switch (option.Key)
                    {
                        case "baseUri":
                            converterProps.SetBaseUri(option.Value);
                            break;
                        case "createAcroForm":
                            converterProps.SetCreateAcroForm(Boolean.Parse(option.Value));
                            break;
                        case "compressLevel":
                            writerProps.SetCompressionLevel(int.Parse(option.Value));
                            break;
                        case "compressFullPdf":
                            writerProps.SetFullCompressionMode(Boolean.Parse(option.Value));
                            break;
                        case "marginTop":
                            marginTop = float.Parse(option.Value);
                            break;
                        case "marginRight":
                            marginRight = float.Parse(option.Value);
                            break;
                        case "marginBottom":
                            marginBottom = float.Parse(option.Value);
                            break;
                        case "marginLeft":
                            marginLeft = float.Parse(option.Value);
                            break;
                    }
                }
            }

            Body.Seek(0, SeekOrigin.Begin);
            PdfWriter writer = new PdfWriter(pdfStream, writerProps);
            PdfDocument pdf = new PdfDocument(writer);

            HtmlConverter.ConvertToPdf(Body, pdf, converterProps);

            pdf.Close();

            return pdfStream;
        }

You can see the result following this link: https://rapidshare.io/2gFK/footer.png

Can I pick your brains to help me out here?

Regards,