¿Por qué no puedo hacer mi div 100% de alto si uso un doctype HTML5? ¿Cómo lo obtengo al 100% de altura?

Estoy trabajando para ordenar el diseño de una aplicación web de galería bastante simple, pero cuando utilizo una statement de tipo de documento HTML5, la altura de algunos de mis divs (que eran del 100%) se reduce, y no puedo engordar ellos hacen una copia de seguridad usando CSS.

Mi HTML está en https://dl.dropbox.com/u/16178847/eyewitness/b/index.html y css está en https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

  • Si elimino la statement del tipo de documento HTML5, todo es como quiero que sea, pero realmente quiero usar la statement correcta de tipo de documento HTML5.
  • Si configuro el tipo de documento en HTML5 y no realizo cambios, el div con la foto y los separadores del pie de página no son visibles, presumiblemente porque tienen 0px de alto.
  • Si configuro doctype en HTML5 y hago que el body { height: 100px } y .container { height: 100px } o .container { height: 100% } , se vuelva visible, pero lo que necesito es que sea de altura completa que una altura en píxeles.
  • Si trato de hacer lo mismo que arriba, pero con el body { height: 100% } los divs de foto y pie de página no son visibles de nuevo.

¿Qué debo hacer para obtener el 100% de altura para que mis divisiones de fotos y pie de página tengan una altura completa?

Solo si el elemento padre tiene una altura definida, no es un valor de auto . Si tiene una altura del 100%, también se debe definir la altura de los padres del padre. Esto podría ir hasta el elemento raíz html .

Así que establezca la altura del html y el elemento del body al 100% , así como también a cada elemento ancestro de ese elemento que desea tener el 100% height en primer lugar.

De hecho, para que funcione, haga lo siguiente:

    Vertical Scrolling Demo     

about

About page content goes here.

portfolio

Portfolio page content goes here.

contact

Contact page content goes here.