[SOLUCIONADO] Mi div #contenedor no cubre el alto de la web

[Viturbiko]

Hola, acabo de empezar un curso sobre diseño y desarrollo web, y por ahora estoy aprendiendo un poco de HTML y CSS.

Pues bien, he creado varios divs para estructurar una pagina. Uno de ellos es nav, que esta por encima de las demas, y a partir de ahi he creado uno que se llama #contenedor, y quiero que cuando los usuarios entren en la página y vayan haciendo scroll hacia abajo el background de este #contenedor sea distinto al del body, para hacer un contraste.

HTML y body tienen una altura y una anchura del 100%, y #contenedor una anchura del 60% y una altura del 100%. El problema viene cuando hago el scroll hacia abajo, pues el background de contenedor hay un momento en el que se detiene. Pongo una imagen para intentar ilustrarlo (no hagais caso de los colores, no son definitivos y pienso cambiarlos todos):



Lo que querria es que el blanco del #contenedor siga descendiendo. Copio y pego el codigo CSS de los tres elementos:

html {
widht: 100%;
height:100%;
}

body {
margin: 0 auto 0 auto;
padding: 0px;
background: url(../images/bg1.png) 0 0 repeat;
width: 100%;
height:100%;
font: Verdana, Geneva, sans-serif;
font-size: 15px;
}

#contenedor {
width: 60%;
margin: 0 auto 0 auto;
height:100%;
background: #FFF;
border: solid 2px #000;
}


Debo añadir que para solucionar un problema que tuve añadí otra div dentro de contenedor que engloba exactamente lo mismo, pero no le he puesto ninguna propiedad y entiendo que en principio no tendría nada que ver.

Muchas gracias y un saludo.

[jvier]

Intenta esto:

Código CSS:

#contenedor {
width: 60%;
margin: 0 auto 0 auto;
height:auto;
overflow: hidden;
background: #FFF; 
border: solid 2px #000;
}
 

[Viturbiko]

Joder amigo mil gracias, llevaba toda la tarde comiéndome la cabeza.

Antes de marcar el hilo solucionado, ¿me podrías explicar un poco porque ha pasado esto? Tenía entendido que la propiedad hidden se utilizaba para ocultar el contenido que sobresalía de un elemento, es decir, pensaba que con esa propiedad lo que pasaría, según la foto que he subido, que la sección "Nuestros Servicios" desaparecería... ¿Qué ha pasado entonces?

Muchas gracias una vez más.

[jvier]

Iniciado por Viturbiko

Joder amigo mil gracias, llevaba toda la tarde comiéndome la cabeza.

Antes de marcar el hilo solucionado, ¿me podrías explicar un poco porque ha pasado esto? Tenía entendido que la propiedad hidden se utilizaba para ocultar el contenido que sobresalía de un elemento, es decir, pensaba que con esa propiedad lo que pasaría, según la foto que he subido, que la sección "Nuestros Servicios" desaparecería... ¿Qué ha pasado entonces?

Muchas gracias una vez más.

Hola, pues tienes razon, para eso sirve... pero en conjunto con la propiedad auto de height, se expande hasta lo que su contenido requiere, y no muestra el scroll