title: Html to PDF converting. Fixed footer on the bottom of the page
body: <p>I have an HTML file that I need to convert to PDF, for that, I'm using
  <a href="http://html2pdf.com/" rel="nofollow noreferrer">http://html2pdf.com/</a></p>
  <p>I need to have the footer fixed at the bottom of the page, like on this screenshot.
  <a href="https://i.stack.imgur.com/OiHNQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OiHNQ.jpg" alt="enter image description here" /></a></p>
  <p>But the HTML file content can be as short as well as long. So When the content is long, the PDF exports to several pages but the footer is visible only on the first page at the bottom and it gets over the content text like on this screenshot.
  <a href="https://i.stack.imgur.com/gSxQK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSxQK.jpg" alt="enter image description here" /></a></p>
  <p><strong>The code that I used is following:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: arial;
    padding-bottom: 100px;
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body style="position: relative;"&gt;
    &lt;div class="gg" style="font-size:30px; color: #0d245d; font-weight: bold;"&gt;Title&lt;/div&gt;
    &lt;div class="gg" style="font-size:15px; color: #333;"&gt;
      Line 1 &lt;br&gt; Line 2 &lt;br&gt; Line 3 &lt;br&gt; Line 4
    &lt;/div&gt;
  
    &lt;div class="gg" style="font-size:18px; color: #333; margin-top: 40px; font-weight: bold;"&gt;SubTitle&lt;/div&gt;
  
    &lt;div class="gg" style="font-size:14px; color: #333;"&gt;Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt; Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text&lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt; Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text
      Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some
      Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text
      Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt; Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text
      Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
      Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt; Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt; Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
      Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
      Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text&lt;br /&gt;
      &lt;br /&gt;
    &lt;/div&gt;
  
    &lt;div class="footer" style="padding-top: 10px; border-top: 1px solid #ddd; font-size:13px; color: #333; margin-top: 20px; text-align: center;"&gt;Footer Text | &lt;a style="color: #03c; text-decoration: none;" href="https://footer.example"&gt;Footer Text&lt;/a&gt; | Footer Text&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Here I need to fix 2 issues</strong></p>
  <ol>
  <li>Have the footer at the bottom of every PDF page in case when the html content is long and PDF pages break to more than one</li>
  <li>Fix the footer overriding issue on the content text (I've tried to give padding-bottom to the body but that didn't help)</li>
  </ol>
  <p>Any ideas how to fix these issues?
  Thanks in advance</p>