title: Keep footer at bottom but not sticky?
body: <p>My basic layout is simple:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
      background: red;
  }
  
  main {
      background: aqua;
      font-size: 48px;
  }
  
  footer {
      background: grey;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;head&lt;/header&gt;
  &lt;main&gt;
  Curabitur aliquam convallis luctus. Vestibulum dolor turpis, consectetur a placerat eget, pellentesque id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  &lt;/main&gt;
  &lt;footer&gt;foot&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If I make my footer <code>position:fixed</code> it does stay at the bottom of the page, but is a &quot;sticky&quot; footer and covered content when scrolling is needed.</p>
  <p>I would like to keep the footer at the bottom, but not be <code>fixed</code>.</p>
  <p>Is this even possible to do with pure CSS?</p>
  <p><a href="https://jsfiddle.net/ky4Q5/" rel="noreferrer">JSFiddle</a></p>