如何将页脚移动到@page 中使用的 margin-bottom space 的 space

How to move footer to the space of margin-bottom space used in @page

我有以下@page

@page {
    size: 210mm 297mm;
    background: white;
    display: block;
    margin-bottom: 15%; // eliminates the page size on the bottom
}

我需要使用 flying-saucer-pdf 版本 9.1.22 将页脚显示到这个遗漏的边距。

我尝试了以下代码,但它不起作用:

@media print {
        div.divFooter {
                margin-bottom: -15% !important; // I need to take advantage of the free space of @page margin bottom
                padding: 0;
                box-sizing: border-box;
                position: fixed;
                bottom: 0;
                height: 80px;
                z-index: 1; 
        }
}

感谢 this, this and this 页,我找到了解决方案。

@page {
   size: 210mm 297mm;
   background: white;
   margin-bottom: 2.3cm;
   @bottom-left {
      vertical-align: top;
      content: element(footer);
      padding-top: 1px;
      border-top:1px solid #777;
   }
   @bottom-center {
      border-top:1px solid #777;
   }
   @bottom-right {
      border-top:1px solid #777;
   }

}
footer {
   margin-top: 0.1cm;
   display: block;
   position: running(footer);
   font-size: 8pt;
   line-height:1.0;
}

我的 html 代码包含以下元素:

<footer>
   <p style="font-size: 10pt;"><b>Note(s)</b></p>
   <p>This is a printed copy.</p>
</footer>

评论:不要在 body@page 中使用 position: 块,因为 running() 将不起作用。