How to fix the footer to make it positioned at the end of the page? (css print)

I wanted to add a header and footer on each page of the printed version of my website, and I used the following method

@media print {
 /* the parent container */
 table.report-container {
      page-break-after:always;
  }
  /* the parent container */
  thead.report-header {
      display:table-header-group;
  }
  /* the footer container */
  tfoot.report-footer {
      display:table-footer-group;
  }
}

The HTML code is as following:

<table class="report-container">
    <!-- the header -->
    <thead class="report-header">
        <tr>
            <th>
                <h1>Header</h1>
            </th>
        </tr>
    </thead>

    <tbody class="report-content">
        <tr>
            <td>
                <!-- body -->
            </td>
        </tr>
    </tbody>
    <!-- the footer -->
    <tfoot class="report-footer">
        <tr>
            <td>
                <h1>Footer</h1>
            </td>
        </tr>
    </tfoot>
</table>

the problem with this method, that in the last page the footer will not be displayed at the end of the page, unless the page body has filled the intire page. like the following:

All I need is to find a way to enforce the footer to be always displayed at the end of the page.

Try this CSS in print as you used.

.report-footer{
  position: fixed;
  bottom: 0;
  background:red;
  display: block;
  width:100%;
}

<table class="report-container">
    <thead class="report-header">
        <tr>
            <th>
                <h1>Header</h1>
            </th>
        </tr>
    </thead>

    <tbody class="report-content">
        <tr>
            <td>
                <!-- body -->
            </td>
        </tr>
    </tbody>
    <tfoot class="report-footer">
        <tr>
            <td>
                <h1>Footer</h1>
            </td>
        </tr>
    </tfoot>
</table>