Masiosare

HTML, CSS, JS, PHP, Wordpress, Mac, Linux, Redes...

Empujar footer a la parte inferior de la ventana

En esta publicación explicaré como empujar el footer a la parte inferior de la ventana usando JavaScript, esto es util en aquellas ocasiones en las que no contamos con suficiente contenido.

Cuando hacemos un sitio web pasamos mucho tiempo haciendo pruebas acerca de la funcionalidad y el diseño pero desafortunadamente a veces pasa que después de tantas horas de trabajo tu obra maestra se ve eclipsada porque: el contenido es muy poco y el footer termina flotando a la mitad de tu ventana.

Footer a mitad de la ventana

Para solucionar este problema haremos uso de JavaScript. Para aquellos que no están familiarizados con JS simplemente será necesario copiar el siguiente código dentro de la etiqueta <head> del archivo HTML donde quieren corregir este problema.

El código

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function empujarfooter(){
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();
    if ($(window).width() > 768) {
        if (vwptHeight > bodyHeight) {
            $("#footer").css("position","absolute").css("bottom",0);
        }
        else {}
        }
    }
    $(document).ready(function () {
        empujarfooter();
    });
    $(window).resize(function () {
        empujarfooter();
    });
</script>

Explicación del código

Este código hace que cada vez que se cargue la página se mida la altura de la ventana y se mida la altura del elemento body del HTML (líneas 4 y 5), posteriormente en la línea 6 se obtiene el ancho de la ventana el cual, para que el código funcione, debe ser mayor a 768px  (“if ($(window).width() > 768)”), elegí este ancho como el mínimo debido a pruebas realizadas en dispositivos móviles.

Una vez que dicha comprobación ha sido realizada y se obtuvo un resultado exitoso en la línea 7 se hace la comparación entre el alto de la ventana y el body, si la altura de la ventana es mayor entonces se procede a modificar los valores del CSS correspondiente al footer, haciendo que este en lugar de flotar a la mitad de la ventana sea empujado a la parte inferior de la ventana, haciendo pensar que el body ocupa toda la ventana.

Consideraciones

  • El footer debe tener el ID “footer”

1 Comentario

Deja un comentario

Su dirección de email no será publicada.

*

© 2017 Masiosare

Tema por Anders NorenArriba ↑