Удалить элемент с первой напечатанной страницы

Question

Я работаю над набором счетов, которые должны хорошо печататься в браузере. У меня есть div, который я хочу оставить в самом конце последней страницы. Он отлично работает, когда печатается только одна страница, но при наличии нескольких страниц он будет отображаться поверх любого содержимого в области страницы.

После попытки прочитать документацию по страницам W3C @page и @media мне так и не удалось это сделать..

@page{
  size: A4;
  margin: 0;
  margin-bottom: 2cm;
}


@media print{

  body{
    padding: 2cm;
  }

  div#invoice-summary-table{
    page-break-inside: avoid;
  }

  div.footer { //this is the div I want to display
    display: block;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @bottom-center {
    font-size: 2em;
    font-family: sans-serif;
    color: #444;
    content: counter(page); //this is not displaying either
 }

 // I have tried pointing to the first page then to the div, after trying to use it inside @media page{ } and a few other options 

 @page :first div.footer {
   display: none;
 } 
}

HTML-код для этого может быть очень простым, контент для заполнения двух страниц и в конце этого

<div class="footer">
        <p class="annotations text-center"><strong>VAT*</strong><em> VAT value might varry depending on your region</em></p>
        <p class="text-center"><strong>Taxes*</strong><em>  Taxes will be calculated in &euro; regarding transport and other taxable services.</em></p>
        <span id="counter"></span>
</div>

Заранее спасибо.