突破后div的最后部分不想占用屏幕高度的100％

Question

我想使用Thymeleaf和Pdf碟將數據打印到pdf文件中。 我在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“ bloc”的高度為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;
}