Cosa significa dare a div uno stile = 'altezza: 100%'?

Question

Ci sono molte domande su SO relative a questo, ma quelle che ho scansionato sono tutte per situazioni specifiche dettagliate. Quello che voglio sapere è, a livello concettuale, cosa vuol dire:

<div style='height:100%'> 

Quanto è alto il 100%? 100% di cosa?

[EDIT]

Followup domanda: se il 100% rappresenta l'altezza del genitore, ma il genitore è <corpo> e non ha un'altezza diversa da l'altezza del div, allora cosa significa? Sembra definito in modo ricorsivo.

Answer 1

100% dell'altezza del contenitore principale.

Vedi qui: http://jsfiddle.net/6VRn6/

Se si desidera utilizzare questo metodo per rendere il div 100% dell'altezza della pagina, è necessario specificare l'altezza come 100% del corpo e HTML.

body, html { 
    height: 100%; 
} 

quando non si specifica un'altezza html o body, le loro altezze sono la somma delle altezze degli elementi in esso.

Updated demo mostrando questo. Abbiamo un div 200px con bordi 2px per un totale di 204px e quindi un div di stato 40px. L'altezza di body dovrebbe essere 244 pixel. Ora, se aggiungi il CSS sopra alla pagina, l'altezza sarà l'altezza del quadrante in basso a destra del jsfiddle. Prova ad aggiungerlo e rieseguire il codice. Quindi ridimensionare il riquadro dei risultati ed eseguirlo di nuovo per vedere di conseguenza il cambio di altezza.

Answer 2

100% di offsetParent. Nella maggior parte dei casi, questo è il documento. Può anche essere un elemento con position diverso da static o un componente di una tabella.

Answer 3

L'altezza: 100% significa: Trasforma quel div grande come genitore!

Answer 4

significa solo il 100% del div o class o tag esso si trovi all'interno. Prova che ha un'idea un po 'questo:

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