I'm attempting to create a Thymeleaf template for rendering a printable PDF. Here is what I currently have:
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
charset="UTF-8"></meta>
<title>Certificate</title>
<style>
@page {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
size: A4 portrait;
}
body {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 10pt;
background-size: 100%;
}
div.main{
border: 1px solid;
}
div.centerText{
text-align: center;
background:lightcyan;
margin: 0px;
}
div.leftText{
text-align: left;
}
div.rightText{
text-align: right;
}
div.signature{
background:PapayaWhip;
}
</style>
</head>
<body th:style="'background-image:url(' + ${bgurl} + '); margin-top: 7.0cm; margin-left: 2.5cm; margin-right: 2.5cm; margin-bottom: 2.0cm;'">
<div class="main">
<div class="centerText">
<h1>title</h1>
</div>
<div class="leftText">
<p>description of certificate</p>
</div>
<div class="signature">
<p>signature</p>
</div>
</div>
<footer>
<div class="rightText">
<p>document information</p>
</div>
</footer>
</body>
</html>The entire page has a background image, but the certificate's actual content must adhere to the margins specified in the body element. I attempted to set margins in the main div, but couldn't position it correctly.
Currently, everything seems fine up to the signature div, but I need to position this element at the bottom of the body with a 2cm bottom margin to the end of the page. The footer should also be positioned directly below the signature div.
I have tried numerous examples from various sources, but haven't been able to achieve the desired layout accurately.
CSS to make HTML page footer stay at the bottom of the page with a minimum height while not overlapping the content
Can anyone provide guidance? An explanation on how to solve this issue would be greatly appreciated, but a brief solution will suffice as well.