Buenas,
Resulta que después de mucho probar y consultar no doy con la solución de lo que quiero hacer, sí que he encontrado información relacionada, pero al aplicarlo a mi CSS no veo que funcione.
Lo que quiero hacer es que el
footer se sitúe siempre al final de la página, si tiene poca altura la página que esté en el borde de la pantalla del navegador y si tiene mucha que no se vea hasta hacer
scroll hasta abajo del todo.
Dicho ésto pongo código por encima a ver si alguien puede echarme una mano:
HTML
Código:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="header-top"></div>
<div id="content">
<div id="search-content">
</div>
<div id="lateral">
<div id="favorites"></div>
<div id="lateral-publi"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
La distribución es una barra superior fija que se mueve al hacer scroll, el contenido que son 2 columnas, y el pie que quiero se quede siempre fijo abajo del todo.
CSS
Código:
#header-top {
height: 40px;
width: 100%;
position: fixed;
z-index: 1;
background: #6ec5ff;
border-bottom: 3px solid #0099ff;
}
#content {
width: 1180px;
min-height: 100%;
margin: auto;
position: relative;
padding: 20px;
padding-top: 50px;
padding-bottom: -202px;
padding-right: 50px;
}
#footer {
width: 100%;
height: 200px;
background: #333;
border-top: 2px solid #000;
position: absolute;
bottom: 0;
}
Creo que lo que pasa es que la caja del contenido no crece con lo que hay en su interior, y no empuja.
Ahora mismo el
footer está colocado debajo, porque el contenido no ocupa suficiente para haber
scroll, pero si añado contenido aparece el
scroll pero el
footer no se mueve, si bajo por la página en
footer se queda en la posición que estaba, es decir, en el medio del contenido.
A ver si alguien ve algo.
Gracias.