Hola, tengo un problema que no consigo solucionar:
Mi página tiene más o menos la siguiente estructura:
Código:
<body>
<div id="General">
<div id="Cabecera">
<!-- contenido cabecera -->
</div>
<div id="Izquierda">
<!-- contenido columna izquierda -->
</div>
<div id="Derecha">
<!-- contenido columna derecha -->
</div>
<div id="Base">
<!-- contenido pie de página -->
</div>
</div> <!-- general -->
</body>
Lo que quiero es que la división #Base esté siempre debajo de todo el contenido de mi página pero, en el caso de que el contenido no ocupe toda la página, que la división esté en el borde inferior de la ventana. Lo consigo poniendo en mi hoja de estilo:
- A la división #General los parámetros {min-height: 100%; position: absolute; top: 0px}
- A la división #Base los parámetros { position: absolute; bottom: 0px; }
Con esto consigo lo que quiero, pero me ha surgido un problema: Cuando la página contiene una imagen grande, parece que la división #Base se posiciona antes de que cargue la imagen, y cuando esta se carga, la página "crece" y la división #Base ya no se mueve, por lo tanto no queda al final de la página.
Sin embargo, al volver a cargar la página o simplemente cambiando el tamaño de la ventana, la división se pone donde tiene que estar.
Espero haberme explicado claramente, porque creo que el problema es algo complejo. ¿A alguien se le ocurre una solución u otra forma de hacer lo que quiero?
Gracias