Mantener el footer fijo en el pie de página
Cuando maquetamos una web siempre solemos seguir el mismo proceso de siempre. Siempre existe una cabecera donde tenemos el logo, barra de menú, tal vez un buscador… Así como el contenido principal ( en una o varias columnas ) y el pie de página.
Es posible que más de alguna vez nos hayamos sentido frustrados a la hora de mantener el footer fijo en el pie de página para aquellas secciones donde no tenemos demasiado contenido o al no tener la altura suficiente en la pantalla donde la estamos viendo y se nos queda en mitad de nuestra web quedando en mi opinión bastante feo y pobre.
Imaginemos que tenemos una estructura como la siguiente:
|
1
2
3
4
5
6
7
|
<div id="wrapper"><div id="header"></div><div id="content">/div><div id="footer">Contenido del footer</div></div><!-- wrapper --></div> |
Para conseguir que se mantenga fijo añadimos lo siguiente a nuestro CSS (hoja de estilos):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
html,body { margin:0; padding:0; height:100%;}#wrapper { min-height:100%; position:relative;}#header {}#content { padding-bottom:100px; /* Altura del footer */}#footer { width:100%; height:100px; position:absolute; bottom:0; left:0;} |
Nos aseguramos de que las etiquetas html y body tengan una altura del 100%, es decir, toda la altura que tengamos disponible en nuestro navegador.
El contenedor donde irá todo el contenido de la web (el div cuya id es wrapper) tendrá una altura MÍNIMA del 100%.
El div cuya id se llama content, es la capa central donde irá todo el contenido de la página. Le añadimos al final un relleno de 100px el cual indica que la altura del footer será de 100px.
⭐ Quizás te interese como aprender a detectar con evento click fuera de un elemento
Por el último en la capa footer damos un ancho completo del 100% de la capa y la altura de 100px (recuerdo que la altura del footer debe ser igual al padding-bottom de la capa content) así como la posición absoluta para fijarlo abajo del todo con un bottom: 0 y un left: 0.
Si quieres nosotros podemos ayudarte a conseguirlo.
