Page-break on fixed elements

Question

With CSS rule page-break in @media print it's easy to break content when we are printing from browser. It works good for me except one thing: it's not working when element is fixed. Using page-break-after: always or page-break-before: always on fixed element didn't help, result is always the same - content simply overlaps that div. Is there any solution for this?

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

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

Content appears in content div and it is dynamical. CSS for footer:

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

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

Using this CSS footer appears on every page, but use of page-break in .footer class doesn't breaks the page?

Answer 1

break-after is a more generic version of page-break-after.

Try it like break-after:always and let us know if it works.

Source