Come utilizzare i CSS per impostare l'altezza di un elemento HTML al 100%

Scopri come funziona l'impostazione dell'altezza con le percentuali in CSS

Valori percentuali in CSS può essere complicato. Quando imposti l'altezza proprietà CSS di un elemento al 100% di cosa lo stai impostando esattamente al 100%? Questa è la domanda principale in cui ti imbatti quando hai a che fare con le percentuali nei CSS e, man mano che i layout diventano più complessi, diventa molto più difficile tenere traccia delle percentuali, risultando in alcuni comportamenti decisamente bizzarri, se non stai attento.

Lavorare con le percentuali ha un netto vantaggio; i layout basati sulla percentuale si adattano automaticamente alle diverse dimensioni dello schermo. Ecco perché l'uso delle percentuali è essenziale nel design reattivo. I più diffusi sistemi di griglia e framework CSS utilizzano valori percentuali per creare le loro griglie reattive.

Chiaramente, ci sono alcune situazioni più adatte a valori statici e altre che funzionano molto meglio con qualcosa di adattivo, come le percentuali. Dovrai decidere quale percorso intraprendere con gli elementi nel tuo progetto.

Unità statiche

I pixel sono statici. Dieci pixel su un dispositivo sono dieci pixel su ogni dispositivo. Certo, ci sono cose come la densità e il modo in cui un dispositivo interpreta effettivamente cos'è un pixel, ma non vedrai mai grandi cambiamenti perché lo schermo ha dimensioni diverse.

Con i CSS puoi definire facilmente un elemento altezza in pixel , e rimarrà lo stesso. È prevedibile.

|_+_|

Ciò non cambierà a meno che non lo modifichi con JavaScript o qualcosa di simile.

Ora, c'è un altro lato di quella medaglia. Non cambierà. Ciò significa che dovrai misurare tutto con precisione e, anche in questo caso, il tuo sito non funzionerà su tutti i dispositivi. Ecco perché le unità statiche tendono a funzionare meglio per gli elementi figlio, i media e le cose che inizieranno a distorcersi e ad apparire strane se si allungano e crescono.

Impostazione dell'altezza di un elemento al 100%

Quando imposti l'altezza di un elemento al 100%, si estende all'intera altezza dello schermo? Qualche volta. I CSS trattano sempre i valori percentuali come una percentuale dell'elemento padre.

Senza elemento padre

Se hai creato un nuovo che è contenuto solo dal tag body del tuo sito, il 100% sarà probabilmente uguale all'altezza dello schermo. Questo a meno che tu non abbia definito un valore di altezza per il .

L'HTML:

|_+_|

Il CSS:

|_+_|

Quella l'altezza dell'elemento sarà uguale a quella dello schermo. Per impostazione predefinita, il copre l'intero schermo, quindi questa è la base utilizzata dal tuo browser per calcolare l'altezza dell'elemento.

Con un elemento padre con un'altezza statica

Quando il tuo elemento è nidificato all'interno di un altro elemento, il browser utilizzerà l'altezza dell'elemento padre per calcolare un valore per il 100%. Quindi, se il tuo elemento si trova all'interno di un altro elemento che ha un'altezza di 100px e imposti l'altezza dell'elemento figlio su 100%. L'elemento figlio sarà alto 100px.

L'HTML:

|_+_|

Il CSS:

|_+_|

L'altezza disponibile per l'elemento figlio è vincolata dall'altezza dell'elemento padre.

Con un elemento padre con un'altezza percentuale

Potrebbe sembrare controintuitivo, ma puoi impostare l'altezza di un elemento su una percentuale di una percentuale. Quando un elemento ha un elemento padre che ha anche la sua altezza definita come valore percentuale, il browser utilizzerà lo stesso valore del genitore, che ha già calcolato in base al suo genitore. Questo perché il 100% di un valore è ancora quel valore.

|_+_|

Il CSS:

|_+_|

In questo caso, l'altezza dell'elemento padre è il 75% dell'intero schermo. Il bambino, quindi, è anche al 100% dell'altezza complessiva disponibile.

Con un elemento padre senza altezza

È interessante notare che quando l'elemento padre non ha un'altezza definita, il browser continuerà a salire di livello fino a quando non trova un valore concreto con cui può lavorare. Se arriva fino al senza trovare nulla, il browser imposterà per impostazione predefinita l'altezza dello schermo, dando al tuo elemento un'altezza equivalente.

L'HTML:

|_+_|

Il CSS:

|_+_|

L'elemento figlio si estende fino alla parte superiore e inferiore dello schermo.

Le unità di visualizzazione

Poiché il calcolo con le unità percentuali può essere complicato e ogni elemento è legato al suo genitore, c'è un insieme di unità che ignorano tutto ciò e le dimensioni degli elementi di base direttamente dallo spazio disponibile sullo schermo. Queste sono le unità di visualizzazione e ti danno una dimensione diretta basata sull'altezza o sulla larghezza di uno schermo, indipendentemente da dove si trova l'elemento.

Per impostare un elemento altezza uguale all'altezza dello schermo, impostare il suo valore di altezza su 100 vh .

|_+_|

È facile interrompere il layout in questo modo e dovrai essere consapevole di quali altri elementi saranno interessati, ma il viewport è di gran lunga il modo più diretto per impostare l'altezza di un elemento al 100% dello schermo.