The last part of div after break-after doesn't want to take 100% of screen height

Question

I want to print datas into a pdf file with Thymeleaf and Pdf Saucer. I have a table inside a div. I have a small message inside the same div which appears at the end after table as page note (not as footer because i have a footer).

<div class="bloc">
      <table>
      </table>
      <div class="pageNote">message</div>
</div>

Here is my css code:

@media print{
        html, body{
            height:100%;
        }
}

div.bloc{
    position: relative;
        height: 100%;
        display: table;
        page-break-after: always;
        page-break-inside: auto;
    }

div.pageNote{
  position: absolute;
    bottom: 0px;
}

When we have few datas in table, div "bloc" is on one page, every thing is Ok because it takes 100% of page. But when, we have many datas in table, div "bloc" height is more than 100%, div "bloc" is on many pages but the last page doesn't takes 100% of screen and my message can appear at the midlle of page. I want the height of div "bloc" to be a multiple of 100% for resolving this problem. According to this, div "bloc" height should be 100%, 200%, 300% ..etc when we have more than one page.

Answer 1

After several tests I solve this problem by adding a div with "page-break-after" class inside the div's parent like this:

<div class="bloc">
      <table>
      </table>
      <div class="pageNote">message</div>
      <div class="breakafter"/>
</div>

Here is my css code:

div.bloc{
    position: relative;
        height: 100%;
        display: table;
        page-break-after: always;
        page-break-inside: auto;
    }

div.pageNote{
  position: absolute;
    bottom: 0px;
}

div.breakafter {
    page-break-after: always;
}