Si aplico este código al footer:
html
{
position: relative;
min-height: 100%;
}
body
{
margin: 0 0 65px;
}
footer
{
width: 100%;
bottom: 0;
position: absolute;
height: 65px;
}
El footer, siempre se mantendrá al final de la página, excepto si no cabe, que entonces quedara oculto y habrá que hacer scroll para poder visualizarlo.
Esto funciona, pero el problema viene cuando en el main o section, añadimos un div que ocupe el espacio sobrante, imaginemos que tenemos un header de un tamaño, un nav de un tamaño, un footer de un tamaño especifico, pero la parte central main, desconocemos el tamaño porque se va adaptando al tamaño de la pantalla y el dispositivo, si sabemos la altura en pixeles no hay problemas, pero delimitas su tamaño a una resolución y dispositivo en concreto, pero si pones una unidad relativa como el % entonces el alto del div se retinge automáticamente al tamaño del contenido es decir si el contenido es una linea de párrafo el div ocupara de alto exactamente eso y el footer aparecerá aislado abajo.
Yo lo que quiero es que independientemente del contenido del div, siempre ocupe el espacio faltante para rellenar la pantalla dejando el footer abajo y si ocupa más del tamaño de la pantalla entonces que el footer se esconda y quede inmediatamente debajo del ultimo elemento.
A ver si alguien me puede ayudar con esto. Gracias
