¿Qué significa dar un div a style = 'height: 100%'?

Question

Hay muchas preguntas sobre SO relacionadas con esto, pero las que escaneé son todas para situaciones específicas detalladas. Lo que quiero saber es, a nivel conceptual, ¿qué significa decir:

<div style='height:100%'> 

¿Qué tan alto es 100%? 100% de qué?

[EDIT]

pregunta de seguimiento: Si el 100% representa la altura de los padres, pero los padres es <cuerpo> y no tiene ninguna otra altura que la altura de la div, entonces, ¿qué significa? Parece recursivamente definido.

Answer 1

100% de la altura del contenedor primario.

Ver aquí: http://jsfiddle.net/6VRn6/

Si desea utilizar este método para hacer el div 100% de la altura de la página, tiene que especificar la altura como el 100% del cuerpo y HTML también.

body, html { 
    height: 100%; 
} 

Cuando no se especifica una altura html o body, sus alturas son la suma de las alturas de los elementos que lo integran.

Updated demo mostrando esto. Tenemos un div 200px con bordes de 2px que suman 204px y luego un div de estado de 40px. La altura body debe ser de 244px. Ahora, si agrega el CSS arriba a la página, la altura será la altura del cuadrante inferior derecho del jsfiddle. Intenta agregarlo y ejecutar el código nuevamente. A continuación, cambie el tamaño del panel de resultados y ejecútelo de nuevo para ver el cambio de altura en consecuencia.

Answer 2

100% de offsetParent. En la mayoría de los casos, ese es el documento. También puede ser un elemento con position que no sea static, o un componente de una tabla.

Answer 3

La altura: 100% significa: ¡Haga que div sea grande como el padre!

Answer 4

sólo significa el 100% de la div o class o tag que está encerrado dentro. Trate de tener una idea un poco esto:

{--parent loop { ..height 100% of above loop .. } }