Html 打印时将页脚放在底页上

我花了好几天的时间想知道如何解决这个问题：

我有一份报告（完整的HTML5+CSS3）和一些页面。报告分为多个部分，每个部分都有一个页眉、一个内容和一个页脚。因此，一个部分基本上是由以下内容组成的：

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

内容

问题是，页脚在print区域（Ctrl+p）中的内容结束（见图1）之后出现，此时页脚必须位于节的底部（见图2）

我不是一个真正的前端大师，这已经成为一个痛苦的实现！ 你能帮我吗？ 谢谢

图1:

图2:

---

页脚应使用绝对位置

标题{
背景颜色：黄色；
高度：50px；
}
页脚{
背景色：红色；
位置：绝对位置；
左：0；
底部：0；
高度：50px；
宽度：100%；
溢出：隐藏；
}

标题
内容
页脚

这样做：

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

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

---

将在每个打印页的底部打印出#页脚。不仅仅是最后一个。@AVI，谢谢你的回答。当内容不会导致分页符时，您的解决方案会起作用。。。在我的例子中，内容通常有两页，所以页脚与文本重叠，只出现在第一页……看来这行不通。MDN:

您只能更改文档的页边距、孤立页、孤立页和分页符。更改任何其他CSS属性的尝试将被忽略。