打印时将页脚放在底部页面上

Question

我几天来试图找出解决这个问题的方法：

我有一些报告（完整的HTML5 + CSS3）和一些页面。报告按部分划分，每个部分都有标题，内容和页脚。所以，一节基本上是这样组成的：

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

问题是，当内容结束时（见图1）页脚在打印区域（Ctrl + P）时，它必须停留在该部分的底部（见图2） ...

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

图1：

图2：

Answer 1

你应该使用页脚绝对位置

let names = fileNames.components(separatedBy: "\n")

header{
  background-color:yellow;
  height: 50px;
}

footer{
  background-color:red;
position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    overflow:hidden;
}

Answer 2

用这样的东西：

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

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