title: How to avoid an unknown height sticky footer to overlap content with CSS only?
body: <p>I want an HTML element (a footer for example) to be absolutely positioned to the bottom of a page but at the same time I don't want it to overlap the content when the viewport is small (vertically resize the browser to see the issue). I want the footer to stay after the content when the viewport is small to avoid overlapping. <strong>Is there any CSS-only solution for that?</strong> </p>
  
  <p>Here's a fiddle showing the issue: <a href="http://jsfiddle.net/nunoarruda/owfz5eby/" rel="nofollow noreferrer">http://jsfiddle.net/nunoarruda/owfz5eby/</a></p>
  
  <pre><code>&lt;div&gt;Content&lt;/div&gt;
  &lt;footer&gt;footer with absolute position&lt;/footer&gt;
  
  footer {
      width: 400px;
      background-color: #ccc;
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>Google's homepage has this implemented but I'm unable to understand if it is a CSS-only method or it requires JavaScript. Here's a screenshot of Google's footer with <code>position: absolute;</code>
  <img src="https://i.stack.imgur.com/a9iLq.png" alt="enter image description here"></p>
  
  <p>And here's a screenshot of Google's footer staying after the content and not overlapping:
  <img src="https://i.stack.imgur.com/E3nBW.png" alt="enter image description here"></p>
  
  <p>Any help appreciated. Thanks in advance!</p>