title: Footer in the bottom of the page - regardless of amount of content
body: <p>I'm trying to make a website, where the footer-section is in the bottom of the browser, regardless of how much content is on the page. </p>
  
  <p>If a page have a lot of content, then it looks normal, since a scrollbar will appear and the footer will be the last element of the page - no biggie. But if a page doesn't have enough content to fill out the browser, then the body-section wont fill the whole height of the browser, and then it challenges me to get the footer to be located in the very bottom of the browsers. So on pages with lesser content, then instead of it going:</p>
  
  <pre><code>logo
  navigation
  content
  footer
  [[ MASSIVE GAP ]]
  </code></pre>
  
  <p>then I want it to go:</p>
  
  <pre><code>logo
  navigation
  content
  [[ MASSIVE GAP ]]
  footer
  </code></pre>
  
  <p>I've tried to illustrate the challenge in this Fiddle: <a href="https://jsfiddle.net/zmhh3z00/" rel="nofollow">https://jsfiddle.net/zmhh3z00/</a> ... As you can see, then the html-section fills the whole page - but the body-section will only fill as much as the content will make of it. And I can't put a <code>height: 100%; overflow: hidden;</code> on the body-element, since that would make the scrollbar disappear on longer pages. I've tried putting a <code>position: relative;</code> on the html-section and then put a <code>position: absolute; bottom: 0px; left: 0; width: 100%</code> on the footer-section, but it's glitchy and works like poo. And the footer can't be <code>position: fixed;</code>, since it then would be visible from top to bottom.</p>
  
  <p>Any suggestions?</p>