- Mensajes
- 1,537
- Puntuación de reacción
- 0
Buenas,
pues hoy diseñando un template 'One Page' me ha vuelto a suceder el 'problema' del footer en el medio de la página al no estar la ventana completamente rellena por el contenido del body, supongo que sabréis a lo que me refiero...
Así que me he puesto a buscar como fijarlo con CSS pero es un poco... incómodo/chapuza la manera de hacerlo, también he buscado con jQuery pero no he encontrado nada simple y entendible para un principiante como yo, así que me decidí a intentarlo y no me salió mal, o eso creo
Veamos, lo primero es crear el documento HTML (lógicamente no me voy a poner a crear un documento grande, sólo creo lo necesario para que se vea la funcionalidad del ejemplo):
Ahora damos paso al CSS necesario, coloreamos la cabecera y el footer para diferenciarlos y creamos una clase (fijo) para darle al footer si la ventana es mayor que el body.
El jQuery:
Por último habría que cargar esta función debajo del jQuery, bien sea en un archivo a parte o definida en el HTML entre las etiquetas <script>
EJEMPLO FUNCIONANDO
Espero que os sea útil.
Saludos! :mola:
pues hoy diseñando un template 'One Page' me ha vuelto a suceder el 'problema' del footer en el medio de la página al no estar la ventana completamente rellena por el contenido del body, supongo que sabréis a lo que me refiero...
Así que me he puesto a buscar como fijarlo con CSS pero es un poco... incómodo/chapuza la manera de hacerlo, también he buscado con jQuery pero no he encontrado nada simple y entendible para un principiante como yo, así que me decidí a intentarlo y no me salió mal, o eso creo
Veamos, lo primero es crear el documento HTML (lógicamente no me voy a poner a crear un documento grande, sólo creo lo necesario para que se vea la funcionalidad del ejemplo):
HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo Footer Fijo</title>
<!--cargamos el jquery-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<header>La cabecera</header>
<section id="contenido"> Aquí iría el contenido</section>
<footer id="footer">Este es el footer fijo</footer>
</body>
</html>Ahora damos paso al CSS necesario, coloreamos la cabecera y el footer para diferenciarlos y creamos una clase (fijo) para darle al footer si la ventana es mayor que el body.
HTML:
header, footer {
height:3em;
text-align: center;
width: 100%;
background-color:#aaa;
}
.fijo{
bottom: 0;
position: fixed;
}El jQuery:
Código:
jQuery(document).ready(function() {
/* una vez carga el documento si se hace scroll, se recarga o se redimensiona la ventana llamamos a la funcion fijar */
$(window)
.load(fijar)
.scroll(fijar)
.resize(fijar);
/* definimos la funcion */
function fijar(){
if ($('body').height() < $(window).height()) { /* conseguimos la largura del body y de la ventana con .heigth() */
$('#footer').addClass('fijo'); /* si la largura de body es menor que la largura de la ventana fijamos el footer con la clase definida previamente en CSS*/
} else {
$('#footer').removeClass('fijo'); /* por el contrario si body es más largo que la ventana dejamos el footer como está */
}
}
});Por último habría que cargar esta función debajo del jQuery, bien sea en un archivo a parte o definida en el HTML entre las etiquetas <script>
EJEMPLO FUNCIONANDO
Espero que os sea útil.
Saludos! :mola:
