在最后一页的底部添加 table 而不使用页脚

Question

我正在使用 html 和 FreeMarker 来创建 pdf。

我要打印很多页，在最后一页的底部加一个table。我已经在每个页面上使用了页脚

<body header="nlheader" header-height="180px" footer="nlfooter" footer-height="80px" padding="0.5in 0.5in 0.5in 0.5in" size="A4">
<table class="body" style="width: 100%; margin-top: 10px;">
    <#--- Body table --->
</table>

<table class="recap">
    <#--- Table to keep at the bottom --->
</table>

Answer 1

有很多方法可以做到这一点，但这是我认为最好的，我个人也使用它：

确保 html 和 body 的高度为 100%
将两个表包装在 div 中并给它 display: flex; with flex-direction：列； 和 justify-content：space-between；
给div一个可用的高度space（100% - 页脚高度）

查看下面的代码片段：

*{/* those only to remove margins */
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{/* make sure to give html and body 100% height */
  height:100%;
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height: calc(100% - 45px); /* 100% - footer height (thats the available space)*/
  /* Change the 45px to the footer height */
}
footer{/* footer sample */
  height:45px;
  background-color:#223;
  color:#fff;
}

<html>
<body>
<div class="container">
<table class="body" style="width: 100%; margin-top: 10px;">
    <td><#--- Body table ---></td>
</table>

<table class="recap">
    <td><#--- Table to keep at the bottom ---></td>
</table>
</div>
<footer>This is the footer</footer>
</body>
</html>

在最后一页的底部添加 table 而不使用页脚

Add table at the bottom of last page without using footer

html

css

freemarker