Sticky footer & bootstrap

smintcs #1 Feb '14

Estoy intentando hacer un footer que se quede abajo cuando la pagina no tiene suficiente contenido, en la documentación de bootstrap tienen un ejemplo de a lo que me refiero

http://getbootstrap.com/examples/sticky-footer/

El tema es que esto funciona metiendo el alto de antemano, no para un footer de tamaño variable. Hay soluciones por ahí, la mas parecida es el cssstickerfooter pero no acabo de hacerlo funcionar, ir va bien pero en según que casos se sale el contenido o se descuadra.

Buscando por ahí veo muchas soluciones pero todas siguen teniendo errores por una parte u otra, al fin todos hacen meter toda la pagina en un wrap y dejar el footer en el hueco de fuera, pero se acaban saliendo por todas partes.

He visto una solución que usa tablas de una manera un tanto curiosa, siempre podría con javascript pillar esa altura pero lo suyo seria una solución html/css3.

Voy a ir probando la opción de javascript mientras, de todas formas todo este código que voy encontrando es solo para hacer el footer sin bootstrap, luego hay que pelearse para que uno no se coma a otro y demás.

smintcs #2 Feb '14

Bueno me autocontesto que creo que he encontrado una manera, probablemente sea chapucera:

<script>
    function actualizarFooter() {
        var altura = $("footer").height();
        $("#wrap").css("margin-bottom", -altura);
        $("#wrap").css("padding-bottom", altura);
    }
    actualizarFooter();
</script>

Ahora me falta llamar a esa funcion cada vez que el footer cambie de tamaño, que supongo que sera con un evento o algo parecido, tengo que mirarlo que de javascript voy justito

Gantorys #3 Feb '14

Pero si la página tiene suficiente contenido (hay scroll hacia abajo) quieres que el footer se siga viendo o quieres que haya que hacer scroll hacia abajo para verlo?

JuAn4k4 #4 Feb '14

Acostumbrate, si usas jquery (Ya que viene en bootstrap) a usar document ready.

$(function() {

// Aquí lo que sea cuando se haya cargado el DOM.
$("#wrap").css({"margin-bottom": -altura,"padding-bottom" : altura});

});

¿ Cómo cambia el footer ? ¿ Por ajax ? Si lo cambias tú, puedes usar eventos :

https://api.jquery.com/bind/
https://api.jquery.com/trigger/


var $wrapper = $("#wrap");

$.bind("dom-footer-change", function(event, data ) { 
   $wrapper.css({"margin-bottom": -altura,"padding-bottom" : altura});
});


....

// Si cambias el footer en cualquier sitio

$.trigger("dom-footer-change");

PD:
Tienes mal

$("footer")

, sera

$("#footer")

imagino.

smintcs #5 Feb '14

Me medio rendí con esto porque tampoco es una prioridad absoluta y estaba echando mucho tiempo en ello, en el fondo no es del todo imposible pero hay que hacer miles de trucos y movidas y no compensa, si no se descuadra al cambiar de tamaño, se descuadra al hacer zoom, los trucos para corregir uno en un navegador luego en otro la lían mas, un follón vamos.

Tunnecino #6 Feb '14

Usar jQuery + http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ cambiando el valor height de los elementos con JS según el contenido no es demasiado difícil de hacer.

bLero #7 Feb '14

Es tan facil como poner el footer fixed bottom cuando el tamaño del documento < tamaño de la pantalla

Sticky footer & bootstrap

Usuarios habituales

Tags