Search code examples
htmlcssfreemarker

Add table at the bottom of last page without using footer

I'm using html and FreeMarker in order to create a pdf.

I have to print many pages and add a table on the bottom part of the last page. I'm already using a footer on each page

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

enter image description here

Solution

  • There's a lot of ways to do this, but this is the best one I think, I also use it personally:

    1. make sure html and body have 100% height
    2. wrap the two tables in a div and give it display: flex; with flex-direction: column; and justify-content: space-between;
    3. give the div a height of the available space (100% - footer height)

    Check out the snippet bellow:

    *{/* 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>