固定元素的分頁符

Question

通過@media print CSS規則page-break ，當我們從瀏覽器進行打印時，很容易破壞內容。 它對我有用，除了一件事：固定元素時不起作用。 使用page-break-after: always或page-break-before: always on固定元素無濟於事，結果始終相同-內容只是與該div重疊。 有什么解決辦法嗎？

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

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

內容出現在content div中，並且是動態的。 頁腳的CSS：

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

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

使用此CSS頁腳會出現在每個頁面上，但是在.footer類中使用page-break不會中斷頁面​​嗎？

Answer 1

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

嘗試使用break-after:always並讓我們知道它是否有效。

資源

Answer 2

我想到的唯一解決方案是使內容底部的填充大於頁腳的高度。 在這種情況下，頁腳和內容不會重疊。

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

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