ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

“DIV” CON 100% DI ALTEZZA DELLA FINESTRA DEL BROWSER SOLO MEDIANTE CSS

Argomenti: , , , ,

Autore: Andrea Baccolini

Le esclusioni css
Mar
20
2014

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:

E qui il CSS usando “vh”

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.

 

 

“DIV” CON 100% DI ALTEZZA DELLA FINESTRA DEL BROWSER SOLO MEDIANTE CSS ultima modifica: 2014-03-20T11:54:24+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

1 commento

  1. Vincenzo scrive:

    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!

      Quote

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.