Tras una entrada en la que indicamos como crear un footer de fondo que quedase pegado al bottom de la ventana, ha habido comentarios diciendo que el truco no funcionaba bien. Esto se debe a que este hack CSS es muy antiguo, por eso algunos navegadores actuales no pueden interpretarlo correctamente.
Por eso hemos querido actualizar dicho hack y ahora os ofrecemos una versión mucho más moderna, compatible con todos los navegadores actuales.
Para crear una imagen que quede “pegada” al bottom de la ventana, debemos seguir estos pasos:
HTML
Añadir este código HTML a nuestro documento:
<div class="headwrap"> <!--Tu contenido--> <div class="container"></div> <!--Fin del contenido--> </div>
CSS
En la etiqueta del cuerpo usaremos una imagen fixed y repetida horizontalmente, posicionada en el bottom.
body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
width: 100%;
min-width:970px;/*--Fixes Background Bug--*/
}
Después añadiremos nuestro fondo de la cabecera en un div:
.headwrap {
background: url(body_bg.jpg) no-repeat center top;
float: left;
width: 100%;
}
Estandarización
XHTML 1.0 Transitional válido (1 error por haber olvidado crear una etiqueta alt, nada más).
CSS 2.1 válido.
Ejemplo
Podemos ver un ejemplo de su funcionamiento.
Probablemente haya otras maneras de conseguir este efecto, si lo sabes, dínos la tuya.
ACTUALIZACIÓN: Deambulante nos cuenta su forma de hacer un footer fixed con CSS:
Primero definir el #container de la siguiente forma:
#container {
width:100%;
margin:0;
min-height:100%;
background:#E3D9C6;
}
/* IE Hack*/
* html #container {height:100%;}
Luego meter todo el contenido de su web en esa gran div, y luego del cierre de la misma agregar la div #footer:
#footer {
position:relative;
height:40px;
margin:-40px auto 0;
}
Como verán, la página les quedaría de un height de 100% + 40px, pero al asignarle un margen negativo al footer, el height final sería de 100% + 40px – 40px, logrando el efecto esperado.
luego, a la div footer le definen el background que quieran y además, le pueden agregar texto sin problemas.
Se puede ver un ejemplo de la técnica de Deambulante en tikalcerámica.
Vía | Sohtanaka
