Esistono un paio di unità di misura CSS 3 chiamate:
Quali sono le lunghezze in percentuale del viewport?
Dalla raccomandazione del candidato W3 collegata sopra:
Le lunghezze in percentuale della finestra sono relative alla dimensione del blocco contenente iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionate di conseguenza.
Queste unità sono vh
(altezza della finestra), vw
(larghezza della finestra), vmin
(lunghezza minima della finestra) e vmax
(lunghezza massima della finestra).
Come può essere usato per fare in modo che un divisore riempia l'altezza del browser?
Per questa domanda, possiamo usare vh
: 1vh
è uguale all'1% dell'altezza del viewport. Vale a dire100vh
è uguale all'altezza della finestra del browser, indipendentemente da dove si trova l'elemento nell'albero DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
Questo è letteralmente tutto ciò che serve. Ecco un esempio di JSFiddle di questo in uso.
Quali browser supportano queste nuove unità?
Questo è attualmente supportato su tutti i principali browser aggiornati ad eccezione di Opera Mini. Scopri Posso usare ... per ulteriore supporto.
Come può essere usato con più colonne?
Nel caso della domanda in esame, con un divisore sinistro e uno destro, ecco un esempio di JSFiddle che mostra un layout a due colonne che coinvolge entrambi vh
e vw
.
Come è 100vh
diverso100%
?
Prendi questo layout per esempio:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
Il p
tag qui è impostato su un'altezza del 100%, ma poiché il suo contenuto div
ha un'altezza di 200 pixel, il 100% di 200 pixel diventa 200 pixel, non il 100% body
dell'altezza. Usare 100vh
invece significa che il p
tag avrà un'altezza del 100% body
indipendentemente div
dall'altezza. Dai un'occhiata a questo JSFiddle di accompagnamento per vedere facilmente la differenza!