How to keep the footer always down

var showContent = document.getElementById("showContent");
var content = document.getElementById("content");

showContent.addEventListener("click", function (event) {
	content.classList.remove("invisivel");
    showContent.classList.add("invisivel");
});

body, html {
    position: absolute;    
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

section {
    position: absolute;
    background-color: whitesmoke;
    top: 40px;
    bottom: 40px;
    width: 100%;
    overflow: auto;    
    z-index: 0;
}

section #container {
    position: absolute;
    box-shadow: 0px 0px 10px black;
    background-color: white;
    margin: auto;
    width: 400px;
    min-height: 100%;
    right: 0px;
    left: 0px;
}

header,
footer {
    position: absolute;
    background-color: gainsboro;
    height: 40px;
    width: 100%;
    box-shadow: 0px 0px 10px black;
    z-index: 1;
}

header {
    top: 0px;
}

footer {
    bottom: 0px;
}

.invisivel {
    display: none;
}

<header></header>
<section>
  <div id="container">
    <input id="showContent" type="button" value="Exibir Conteudo" /> 
    <div id="content" class="invisivel">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt efficitur fermentum. Integer viverra tristique diam eget commodo. Aliquam faucibus velit nec porttitor fermentum. Aliquam tristique tempor sem nec aliquam. Etiam id lorem at tellus iaculis iaculis. Donec tincidunt lectus sed dolor tincidunt efficitur. Cras eu neque ex. Vestibulum eu volutpat lectus. Suspendisse varius, turpis quis aliquam dapibus, ligula ligula facilisis nunc, id tincidunt nulla massa sit amet mauris. Praesent sed ex id neque sagittis egestas laoreet eget purus. Nunc egestas consequat tellus, ut ullamcorper eros facilisis eu. Maecenas a lorem nisi.
      </p>
      <p>
        Cras faucibus velit at lorem laoreet, sed vulputate eros venenatis. Aliquam erat volutpat. Pellentesque enim eros, varius eget cursus ut, euismod quis nisl. Integer volutpat tempus velit. Ut turpis lorem, facilisis a consequat in, tincidunt sit amet felis. Nulla imperdiet leo eget justo consequat, nec luctus odio sodales. Etiam urna est, lobortis in tristique at, tincidunt a ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt id ipsum in rutrum. Donec tempor id ligula nec consectetur. Mauris mattis, mi quis consequat tincidunt, turpis quam faucibus risus, ac iaculis nunc sapien quis lorem.
      </p>
      <p>
        Nunc finibus tortor ipsum, quis maximus sapien pharetra vel. Mauris auctor rutrum est, ut fringilla nisi auctor id. Sed lacinia laoreet rutrum. Nulla eget volutpat lacus, ac ullamcorper mi. Aenean consequat vulputate molestie. Ut dictum arcu sit amet elit vehicula posuere. Curabitur gravida, eros vestibulum mollis faucibus, quam tellus laoreet nibh, ut viverra est nulla non lacus. Proin mollis tortor eget orci convallis, et posuere turpis congue. Pellentesque accumsan, lorem non dapibus dapibus, dolor risus aliquam purus, vel vestibulum orci sem non arcu. Etiam accumsan sollicitudin libero. Suspendisse tristique, tortor eu tristique vehicula, lectus nibh tempus orci, eget elementum magna libero non nibh. Mauris dapibus quam nec finibus eleifend. Curabitur ut lacus at velit vulputate fringilla. Duis cursus dictum nulla, porta pellentesque nulla consequat eu. Aenean elementum condimentum metus et pharetra.
      </p>
      <p>
        Fusce varius metus eu nibh porta, sit amet facilisis sapien dapibus. Pellentesque ullamcorper dui leo, vitae tristique massa molestie vitae. Morbi sit amet mauris non eros lobortis vestibulum eu et orci. Quisque in massa at quam malesuada consequat vel vitae augue. Aenean ut purus elementum, malesuada risus sodales, varius neque. Aenean gravida congue diam, id finibus felis vulputate in. Curabitur mattis quis erat at porta. Fusce non congue massa, at convallis justo.
      </p>
      <p>
        Sed pellentesque diam eu nibh finibus, vitae euismod diam blandit. Ut luctus, massa gravida efficitur pretium, eros felis ullamcorper quam, vitae tempor sapien lectus commodo enim. Nunc eget mi eget nibh posuere interdum quis sed nibh. Phasellus iaculis luctus dapibus. Vestibulum at finibus urna, lobortis maximus erat. Donec maximus risus id est tristique rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, lacus eu semper finibus, elit sapien eleifend justo, in vehicula libero lacus imperdiet elit. Vestibulum lacus odio, luctus eu ex eget, efficitur ultrices est. In eget eleifend ex.
      </p>
    </div>
  </div>
</section>
<footer></footer>

/*reset*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

main {
  background-color: rgb(201, 225, 222);
  display: block;
  min-height: 100vh;
  min-height: -webkit-calc(100vh - 100px);
  min-height: -moz-calc(100vh - 100px);
  min-height: calc(100vh - 100px);
  position: relative;
  width: 100%;
}
footer {
  background-color: rgb(0, 55, 96);
  display: block;
  min-height: 100px;
  width: 100%;
}

<main></main>
<footer></footer>

html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#wrapper {
  min-height:100%;
  position:relative;
}
#header {
  padding:10px;
  background:#5ee;
}
#content {
  padding:10px;
  padding-bottom:80px;   /* Height of the footer element */
}
#footer {
  width:100%;
  height:80px;
  position:absolute;
  bottom:0;
  left:0;
  background:#ee5;
}

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

window.onload = posicionaRodape;
window.onresize = posicionaRodape;

function posicionaRodape() {
  var topo = document.querySelector("#topo");

  var conteudo = document.querySelector("#conteudo");

  var rodape = document.querySelector("#rodape");

  var tamanhoTela = window.innerHeight;

  if (rodape.offsetTop < tamanhoTela - rodape.offsetHeight) {
    conteudo.style.marginBottom = (tamanhoTela - topo.offsetHeight - conteudo.offsetHeight - rodape.offsetHeight - 20) + "px";
  } else {
    conteudo.style.marginBottom = "20px";
  }
}

* {
  margin: 0;
  padding: 0;
}
body {
  background: #ccc;
}
#topo {
  width: 100%;
  height: 150px;
  background: #555;
}
#conteudo {
  width: 80%;
  height: 200px;
  background: #555;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
#rodape {
  width: 100%;
  height: 50px;
  background: #555;
}

<div id="topo" onclick="alert(window.innerHeight)"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

jQuery(document).ready(function($){

  // Aplica a altura toda vez que a janela for redimensionada 
  $(window).resize(function(event){

    // Altura da Janela
    var windowHeight = $(window).height();
    
    // Altura do Cabeçalho (com margins e paddings)
    var headerHeight = $('header').outerHeight(true, true);
    
    // Altura do Rodapé (com margins e paddings)
    var footerHeight = $('footer').outerHeight(true, true);
    
    // Altura mínima calculada
    var contentHeight = Math.floor(windowHeight - headerHeight - footerHeight);
    
    // Aplica a altura mínima necessária para que o footer encoste na parte
    // inferior da janela
    $('section').css('min-height', contentHeight);
  
  }).resize(); // Executa o evento uma vez para que seja aplicada as correções

});

body{margin:0;padding:0;}
header, section, footer{
  color:#FFF;
  text-align:center;
  font-size:20px;
  line-height:80px;
}

header{
  background-color:#764895;
  height:80px;
}
section{
  background-color:#053057;
}
footer{
  background-color:#549276;
  height:30px;
  line-height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><header>Cabeçalho</header><section>Conteúdo</section><footer>Rodapé</footer>