固定元素的分页符

Question

使用page-break中的CSS规则@media print，当我们从浏览器打印时，很容易破坏内容。除了一件事，它对我有用：当元素被修复时它不起作用。在固定元素上使用page-break-after: always或page-break-before: always没有帮助，结果总是相同的 - 内容只是重叠了div。对此有什么解决方案吗？

<div id="content">   
</div>

<div class="footer"></div>

内容出现在内容div中，并且是动态的。 页脚的CSS：

@media screen{
  .footer{
    display:none;
  }
}

.footer{
  display:block;
  height:30px;
  position:fixed;
  bottom:0;
}

在每个页面上都会显示使用此CSS页脚，但在page-break课程中使用.footer不会破坏页面？

Answer 1

break-after是page-break-after的更通用版本。

尝试break-after:always并告知我们是否有效。

Source

Answer 2

我认为只有解决方案是提供一个内容填充底部大于页脚高度。在这种情况下，页脚和内容不会重叠。

.footer{
  display:block;
  height:30px;
  position:fixed;
  bottom:0;
}

#content {
  ...
  padding-bottom:50px;
}