Remove repeating header/footer in page when printing

Question

I'm using position:fixed; bottom:0; in css to place my element at the bottom for every page when printing. here is my code:

@media print {
    .empty-footer {
    height: auto;
  }
  .page-footer {
    position: fixed !important;
    bottom: 5px !important;
    width: 100% !important;
    height: auto !important;
  }
}

now I want to Remove this element .page-footer at the last page. I tried, .page-footer:last-of-type {display:none} but it doesnt work, instead it removes all, because I'm guessing, when using position fixed. it displays it in all of my pages, but still having only 1 occurrence in the page.

CSS, or Javascript script fix will do. thanks in advance.