打印时将页脚置于底部页面

Question

我花了几天时间试图弄清楚如何解决这个问题：

我有一份包含一些页面的报告（完整的 HTML5 + CSS3）。该报告按部分划分，每个部分都有页眉、内容和页脚。因此，一个部分的基本组成如下：

<section>
  <header></header>
  <div>CONTENT</div>
  <footer></footer>
</section>

问题在于，当页脚位于打印区域 (Ctrl + P) 时，它必须位于该部分的底部（参见图 2），因此页脚紧随内容结束之后出现（参见图 1）...

我不是一个真正的前端高手，实现它已经变得很痛苦！你能帮我解决这个问题吗？谢谢！

图1：

图2：

Answer 1

像这样：

@media print {
    #footer {
        position: absolute;
        bottom: 0;
        display: none;
    }

    @page: last {
        #footer {
            display: block;
        }
    }
}