Come rendere un elemento l'intera altezza di una pagina?

Question

C'è un modo per impostare un elemento DIV per occupare tutta l'altezza della pagina. Qualcosa di simile:

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

ho Google'd un paio di volte, ma tutti sembrano come arounds di lavoro davvero complicato per quello che è probabilmente un problema davvero molto semplice, con una soluzione semplice.

Answer 1

Se il div è un figlio diretto di body, questo funziona:

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

In caso contrario, è necessario continuare ad aggiungere height: 100% ad ognuno di esso è genitori, nonni, ... fino a che non hai raggiunto una diretta figlio di body.

È semplice. Affinché un'altezza percentuale funzioni, il genitore deve avere un'altezza specificata (px,% ... qualunque sia). In caso contrario, è come se tu avessi impostato height: auto;

Un altro modo per farlo è quello che hai nella risposta: è dargli un valore di posizione assoluto, relativo all'elemento che definisce l'altezza della pagina.

Answer 2

Assicurati di impostare height: 100% su html e body in modo che il div abbia un contesto per l'altezza! Spero possa aiutare.

Answer 3

Abbastanza sicuro è necessario impostare il html e body-100%:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

div.left { 
    height: 100%; 
} 

Fiddle here.

Answer 4

Questo è il modo più semplice per fare in modo che un div occupi l'intera altezza di una pagina.

altezza: 100vh;