Последняя часть div после break-after не хочет занимать 100% высоты экрана

Question

Я хочу напечатать данные в PDF-файл с помощью Thymeleaf и Pdf Saucer.У меня есть стол внутри div.У меня есть небольшое сообщение внутри того же самого div, которое появляется в конце после таблицы как примечание страницы (не как нижний колонтитул, потому что у меня есть нижний колонтитул).

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

Вот мой код CSS:

@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;
}

Когда у нас мало данных в таблице, div "bloc" находится на одной странице, все в порядке, потому что занимает 100% страницы.Но когда у нас много данных в таблице, высота div "bloc" превышает 100%, div "bloc" находится на многих страницах, но последняя страница не занимает 100% экрана, и мое сообщение может появиться в серединестр.Я хочу, чтобы высота div блока была кратна 100% для решения этой проблемы.В соответствии с этим высота div "блока" должна составлять 100%, 200%, 300% ... и т. Д., Когда у нас более одной страницы.

Answer 1

После нескольких тестов я решаю эту проблему, добавив div с классом "page-break-after" внутри родительского элемента div следующим образом:

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

Вот мой код CSS:

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;
}