ANDREA BACCOLINI
Web designer

CSS Design Award nominated

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

Argomenti: , , , ,

Autore: Andrea Baccolini

CSS 3
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:

your content on screen 1
your 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.

 

 

“DIV” CON 100% DI ALTEZZA DELLA FINESTRA DEL BROWSER SOLO MEDIANTE CSS ultima modifica: 2014-03-20T11:54:24+01:00 da Andrea Baccolini
Avatar for 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. Avatar for Vincenzo 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!

COMMENTA QUESTO ARTICOLO!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Andrea Baccolini | Web designer Copyright 2012 - 2024 © Responsive design - Seguimi su Facebook - CF:BCCNDR76P08D325K.