html - 打印时将页脚放在底部

Question

我花了好几天时间想办法解决这个问题:

我有一份包含一些页面的报告(完整的 HTML5 + CSS3)。报告按部分划分，每个部分都有标题、内容和页脚。所以，一个部分基本上是这样组成的:

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

问题是当页脚位于打印 区域 (Ctrl + P) 时，内容结束后立即出现(见图 1)，而页脚必须位于该部分的底部(见图 2) ...

我不是真正的前端高手，实现它已成为一种痛苦!你能帮我吗？谢谢!

图 1:

图 2:

Answer 1

你应该为页脚使用绝对位置

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

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

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