title: Make footer sticky to bottom but not screen?
body: <p>How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;&lt;/div&gt;
          &lt;div id="body"&gt;&lt;/div&gt;
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.</p>