cito="el problema es que el footer queda pegado al bottom del navegador"
#footer {
position:absolute;
bottom:0px; /*tu footer irá subiendo a medida que aumentes este valor*/}
cito="el div contenedor se escala de modo que sobra mucho espacio entre el footer y dicha capa"
Yo
no utilizaría position:absolute; para el footer, ya que con ello se quita al div del flujo normal del documento. Más bien, utilizaría un div contenedor para tus dos divs, "contenido" y "footer" respectivamete. Algo así:
<div id="contenedor">
<div id="contenido"> ... </div>
<div id="footer"> ... </div>
</div>
El problema está en:
#footer {
position:absolute;
bottom:0px;
text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
quítalo ...
#footer {
text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
... y maqueta con un contenedor (<div id="contenedor"> aquí el contenido, en tu caso los dos divs </div>)
cito="pero el problema es que el footer queda pegado al bottom del navegador, pero cuando bajo el scrollbar queda arriba."
Puedes mirar el código de
este ejemplo de mikmoro.
Pruebalo y luego nos cuentas! Saludos!
