¿Cómo hacer que un elemento tenga la altura completa de una página?

Question

¿Hay alguna forma de que pueda configurar un elemento DIV para que ocupe toda la altura de la página? Algo así como:

div.left { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

he Google'd un par de veces, pero todos ellos parece arounds de trabajo muy, muy complicados para lo que probablemente es un problema muy, muy simple con una solución sencilla.

Answer 1

Si el div es un hijo directo de body, esto funciona:

body, html {height: 100%; } 
div { height: 100%; } 

De lo contrario, usted tiene que seguir añadiendo a cada uno de height: 100% son los padres, abuelos, ... hasta que usted ha alcanzado una directa hijo de body.

Es simple. Para que un porcentaje de altura funcione, el padre debe tener una altura especificada (px,% ... cualquiera). Si no es así, es como si hubiera establecido height: auto;

Otra forma de hacerlo es como lo tiene en su respuesta: es para darle un valor de posición absoluta, en relación con el elemento que define la altura de la página.

Answer 2

¡Asegúrese de configurar height: 100% en html y body para que el div tenga un contexto de altura! Espero que ayude.

Answer 3

Bastante seguro de lo que necesita para establecer el htmlbody y al 100%:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

div.left { 
    height: 100%; 
} 

violín here.

Answer 4

Esta es la forma más sencilla de hacer que un div ocupe toda la altura de una página.

altura: 100vh;