Uno de los principales problemas a la hora de desarrollar o diseñar un sitio o sistema web es la ubicación del footer.
Cuando se tiene un tamaño predefinido del contenedor resolverlo por css es muy sencillo, sin embargo, cuando no se tiene un tamaño especifico para el contenido y este es muy largo o muy corto, es un poco mas complejo.
En este post te explicamos una de las formas de como resolverlo de manera sencilla por css, de esta forma podemos evitar que el footer y nuestros créditos aparezcan muy abajo y el usuario deba hacer mucho scroll para verlos o bien que aparezca a mitad de la página si el contenido es muy corto.
Para resolverlo haremos uso de la propiedad padding:
Primero el html:
La estructura del html es bastante sencilla, primero apuntamos a nuestra hoja de estilos css, luego dentro de la etiqueta body, crearemos la etiqueta «wrapper» y dentro de esta dividiremos el contenido normalmente creando las secciones «header-zone» para el header, «middle-zone» para nuestro contenido y «footer-zone» para el footer o nuestra zona de créditos. Tal como se muestra a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper" class="col-md-12">
<div id="header-zone">
</div>
<div id="middle-zone">
</div>
<div id="footer-zone">
</div>
</div>
</body>
</html>
Luego el css:
Una vez tengamos la estructura del html, apuntando a nuestra hoja de estilos, lo que debemos hacer es copiar estas sencillas reglas.
body, html {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header-zone {
padding:10px;
height: 50px;
background:red;
}
#middle-zone {
padding-bottom:100px;
}
#footer-zone {
height: 50px;
background:black;
width:100%;
position:absolute;
bottom:0;
left:0;
}
Con esta estructura del html y estilos podemos encontrar el footer siempre abajo o al final de cada página independientemente de su tamaño.
