Hola, tengo una página con un div contenedor con fondo de color azul, tiene un ancho absoluto y un margin: 0 auto; Entiendo que lo anterior significa 0 margen arriba y abajo y auto a los lados.
Dentro de este div tengo otro div con ancho absoluto también, color transparente y alto no definido, digamos que los elementos dentro de él determinarían su alto. Este tiene un margin: 0 auto; también (no se si era necesario ya que en teoría lo heredaría del elemento padre), además tiene un padding-bottom.
La razon de ser del segundo div es crear el efecto de un marco y con la transparencia jugar con fondos con partes transparentes y dar un estilo concreto.
Luego dentro de este div ya están la cabecera, el cuerpo y el pié de página.
PROBLEMA: quiero que el div padre tenga un height del 100% ya que mi página index.html en algunas pantallas por no tener mucho alto puede quedarse corta y el color del body es blanco, mientras que el color del div contenedor es azul. Y no consigo que sea del 100%.
El código xhtml es el siguiente:
Cita: <div id="divcontenedor"><div id="divsubcontenedor">[...]</div></div>
El código CSS es este:
Cita: #divcontenedor {background: color url("imagen.jpg") repeat-x; height: 100%; width: 984px; margin: 0 auto; padding-bottom: 11.5px;}
#divsubcontenedor {width: 961px; margin: 0 auto;}
*Detalle: lo que es el contenido, tanto la cabecera, como el cuerpo, como el menú horizontal como el pie de página tienen un alto fijo. Los dos divs contenedores se comportan como un guante digamos, se adaptan al tamaño de lo que contienen respetando los márgenes de los elementos y punto.