FyingSaucer's pdf generator cause overlay between content body and footer

I want to know if anyone faced this issue when generating pdf from html.

For context,

this is the one structure part of main html for the pdf I am trying to generate.

{{table}} <div class="disclaimer-section"> <ul> {{disclaimer}} </ul> </div> {{footer}} * { font-family: "Microsoft JhengHei"; } body { font-size: 10px; margin: 0px 0px; color: #333; line-height: 1.4; padding-bottom: 60mm; } {{table}} .disclaimer-section { margin-top: 12px; font-size: 8pt; color: #333; line-height: 1.5; } .disclaimer-section .disclaimer-title { font-weight: 500; margin-bottom: 6px; font-size: 8pt; } .disclaimer-section ul { list-style: none; margin: 0; padding-left: 0; font-size: 8pt; } .disclaimer-section li { margin: 0 0 4px 0; display: table; width: 100%; table-layout: fixed; font-size: 8pt; } .disclaimer-section li span:first-child { display: table-cell; width: 15px; text-align: right; vertical-align: top; padding-right: 3px; font-size: 8pt; } .disclaimer-section li span:last-child { display: table-cell; width: auto; vertical-align: top; font-size: 8pt; }

The Table section (content body) and footer are made out of different html and css

table html and css:

<table class="projection-table"> <thead> <tr> <td>{{B1Header}}</td> <td>{{A1Header}}</td> </tr> </thead> <tbody> <tr> <td>{{B1}}</td> <td>{{A1}}</td> </tr> </tbody> </table> * { font-family: "Microsoft JhengHei"; font-size: 10pt; } body { margin: 0px 0px; color: #333; line-height: 1.4; } table.projection-table { width: 100%; border-collapse: collapse; font-size: 8pt; } table.projection-table th { padding: 6px 4px; font-weight: 700; font-size: 8pt; text-align: right; } table.projection-table td { padding: 5px 4px; text-align: right; font-size: 8pt; }

footer:

<div class="footer"> <p class="footer-remark">{{footerRemark}}</p> <hr class="divider" /> <table class="footer-table"> <tbody> <tr class="footer-row"> <td class="footer-left page-counter"></td> <td class="footer-right"> <table class="footer-right-table"> <tbody> <tr> <td class="text-right">abcd</td> <td class="text-right"> egfddd </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> .footer-table { width: 100%; border-collapse: collapse; font-family: "Microsoft JhengHei"; } .footer-row { font-size: 8pt; border-collapse: collapse; } .footer-right { vertical-align: top; width: 50%; font-size: 8pt; } .footer-right-table { width: 100%; border-collapse: collapse; } .text-right { text-align: right; font-size: 8pt; } .page-counter { text-align: left; font-size: 8pt; } .page-counter::before { content: counter(page) " / " counter(pages); } .footer-remark { vertical-align: bottom; text-align: left; font-size: 8pt; margin-bottom: 4px; } .divider { border: 0.5mm; border-top: 0.5mm solid #49648c; } .footer { position: fixed; bottom: 0; left: 0; right: 0; font-size: 8pt; background-color: transparent; } @media print { .footer { position: fixed; bottom: 0; } body { margin-bottom: 40px; } }

When pdf generated, this occur:

The overlay image

Things that have been done to resolve this issue:

add margin-bottom/padding-bottom for the body of table: does not work as it just add spacing after the overlay

add page-break-inside: avoid into table css

remove fixed position for footer: cause the footer to only generate on the last page (not intended results as I want footer to appear each page)