title: How to print a HTML footer on every page without the body overlapping?
body: <p>I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer. </p>
  
  <p>What I have is basically this:</p>
  
  <pre><code>&lt;style&gt;
      footer {
          position: fixed;
          bottom: 5pt;
          height: 100pt;
      }
  &lt;/style&gt;
  &lt;div&gt;
      content...
  &lt;/div&gt;
  &lt;footer&gt;
      footer
  &lt;/footer&gt;
  </code></pre>
  
  <p>But when the body content is too large, it overlaps with the footer and I can't find a way around it.<br>
  I tried <code>@page { margin-bottom: 100pt; }</code>, but it pushes the footer up too, padding didn't work, <code>position: running</code> did nothing (I couldn't find whether any browser supports it).  </p>
  
  <p>The requisites to solve this are: </p>
  
  <ul>
  <li>the footer needs to appear on every page on print;</li>
  <li>the footer content can't overlap with the rest of the page;</li>
  </ul>