media print query with report header and sticky footer divs

Question

I've been struggling to find the best way to have my footer div always "stick" to the bottom of the page, just below my content-wrap div; however, in some cases this footer ends up floating up and down (depending on the height of the image within the content-wrap div).

NB. The footer seems to always stick to the bottom prior to clicking PRINT, but then the print preview may vary (i.e. the footer doesn't always stick to bottom).

Below is a skeleton of the HTML/CSS/JavaScript you will see in the full project I've posted -

https://stackblitz.com/edit/js-atmmzu?file=index.js

We have a section tag, and below that one of more article tags. Within each article there's a content-wrap, which contains the rept-header and img tag. Below the content-wrap we have the rept-footer

<section id="articles">
<article>
  <div class="content-wrap">
    <div class="rept-header">
      <div class="pat-header proofsheet-table">
        ...
      </div>          
    </div>
    <img src="..." />
  </div>
  <div class="rept-footer">
    <div><img height="15" width="50" src="...png" /></div>
    <div>Page 1 of 1</div>
    <div>&nbsp;</div>
  </div>
</article>

What I DON'T like is the way we position the footer in the css:

.rept-footer {
  margin-top: 14%;
}

I believe there is a more optimal way of position that footer - in such a way that it always fall to the bottom of the page when printing.

Any advice is appreciated.

thanks.