Traduzione dell’articolo “How to Make Div Element 100% Height of Browser Window Using CSS Only” del blog “Stanislav Kostadinov.“
In questo post troverete il modo per far si che un elemento HTML riempia l’altezza di qualsiasi schermata con i CSS.
Ci sono molti modi per rendere l’altezza dei vostri elementi HTML alti esattamente come l’altezza della schermata del browser , indipendentemente dalla risoluzione dello schermo , il browser , dispositivo , ecc
Molte di queste opzioni utilizzano JavaScript per scoprire l’altezza della finestra .
Ma c’è un modo per farlo solo con il CSS puro .
Che cosa è la lunghezza Viewport – Percentuale ( o Viewport – Relativa )?
“Le lunghezze finestra – percentuali sono relative alla dimensione del blocco contenitore iniziale. Quando si modifica l’altezza o la larghezza del blocco contenitore iniziale, sono scalati di conseguenza.”
Quindi , usando lunghezze viewport – percentuali , gli elementi HTML si adattano automaticamente quando l’altezza o la larghezza dello schermo cambia .
Ci sono alcune opzioni che si possono trovare utili :
- vh (altezza finestra )
- vw (larghezza finestra )
- vmin ( viewport lunghezza minima )
- vmax ( viewport lunghezza massima )
Ora , diamo uno sguardo ad un esempio reale.
Immaginate di voler creare un sito web con due sezioni , ognuna delle quali con la dimensione della finestra del browser .
Ecco solo un esempio di codice semplificato del HTML:
your content on screen 1your content on screen 2
E qui il CSS usando “vh”
div#welcome { height: 100vh; background: black; } div#projects { height: 100vh; background: yellow; }
LUNGHEZZE VIEWPORT-PERCENTUALE E SUPPORTO DEI BROWSER
Fortunatamente, tutti i browser moderni li supportano.
Ho provato vh su Internet Explorer 9 e sta funzionando finora, ma ho letto che IE 8 non lo supporta. Tuttavia si può sempre fornire un ripiego per i browser che non supportano lunghezze-viewport utilizzando la vecchia opzione “height: 100%”.
Per dire ho provato sul mio iPhone con Safari e sta funzionando egregiamente, quindi ti consiglierei di andare avanti e fare un tentativo.
Se avete problemi o avete notato qualcosa di importante che ho tralasciato – non esitate a contattarmi.
NB:Di recente ho constatato che questo pseudo-elemento può dare problemi con i browser su IOS 6 e 7.
Riporto qui di seguito un link ad una tabella di compatibilità aggiornata:
http://caniuse.com/#search=vw
Traduzione dell’articolo “How to Make Div Element 100% Height of Browser Window Using CSS Only” del blog “Stanislav Kostadinov.“
Quel momento imbarazzante in cui ti rendi conto che dopo 5 anni che lavori con i CSS e non avevi mai sentito parlare di VH. Decisamente comodo, soprattutto per le “hero unit” a tutto schermo. Grazie!