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; }