固定元素的分页符

Question

使用CSS规则page-break,@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

我想到的唯一解决方案是让内容的 padding-bottom 大于页脚的高度。在这种情况下，页脚和内容不会重叠。

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

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