¿cómo configuro la altura del contenedor DIV al 100% de la altura de la ventana?

Question

Tengo un par de problemas con mi contenedor DIV. Por un lado, no está reconociendo la altura de mi contenido correctamente (pensé que se extendería más allá de la parte inferior del contenido principal y la barra lateral, pero no es así). Puedes ver a qué me refiero en this page.

También me gustaría que el contenedor DIV siempre llene la altura disponible de la pantalla/ventana. Intenté configurarlo en min-height:100%, pero esto no tuvo ningún efecto.

Aquí es el CSS que estoy usando para el DIV contenedor:

#container { 
    padding: 0; 
    margin: 0; 
    background-color: #292929; 
    width: 1200px; 
    margin: 0 auto; 
    min-height: 100%; 
} 

Le agradecería cualquier ayuda a conseguir este trabajo.

Gracias,

Nick

Answer 1

Agregue esto a su css:

html, body { 
    height:100%; 
} 

Si dices altura: 100%, que significa 'el 100% del elemento padre. Si el elemento padre no tiene una altura especificada, no pasará nada. Solo establece 100% en el cuerpo, pero también necesita agregarlo a html.

Answer 2

¿Ha definido el CSS:

html, body 
{ 
    height: 100%; 
} 

Esto es necesario para poder hacer el div ocupar todo el espacio. :)

Answer 3

Puede neto dispuesto en él para ver la altura

html, body 
{ 
    height: 100vh; 
} 

Answer 4

html { 
    min-height: 100%; 
} 

body { 
    min-height: 100vh; 
} 

El html height (%) se hará cargo de la altura de los documentos que Está en height es más que un 100% del screen view mientras que el body view height (vh) tendrá cuidar la altura del documento que es menor que el alto de la vista de pantalla.