Edit in JSFiddle

var pie = document.getElementById("pie");
var contenedor = document.getElementById("contenedor");
alturaFooter = pie.offsetHeight;
pie.style.marginTop = alturaFooter * -1 + "px";
contenedor.style.paddingBottom = alturaFooter + "px";
<div id="contenedor">
  <header>Header</header>
  <section>
    Contenido principal.
  </section>
</div>
<footer id="pie">Footer<br>Variable<br>en<br>Altura</footer>
body{
  padding: 0;
  margin: 0;
}
header, footer{
  padding: 20px;
  color: white;
  background-color: black;
  text-align: center;
}
section{
  padding: 20px;
  text-align: center;
}

/*soluciĆ³n final*/
html, body{
  height:100%;
}
#contenedor{
  min-height: 100%;
  box-sizing: border-box;
}