Mantener el footer fijo en el pie de p√°gina

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.

Abrir chat
1
Hola,
¬ŅHablamos?
Powered by