如何将页脚移动到@page 中使用的边距底部空间的空间

【问题标题】：How to move footer to the space of margin-bottom space used in @page如何将页脚移动到@page 中使用的边距底部空间的空间
【发布时间】：2021-07-22 19:40:12
【问题描述】：

我有以下@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; 
        }
}

【问题讨论】：

标签： html css itext margin flying-saucer

【解决方案1】：

感谢this、this 和this pages，我找到了解决方案。

@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，因为running() 不起作用。

【讨论】：