Per creare elementi reattivi all’altezza in CSS, è necessario utilizzare percentuali o unità di misura relative rispetto alla propria dimensione parent.
Ecco un esempio di come potrebbe funzionare:
```
.container {
/* Questo stabilisce un’altezza specifica per il contenitore. */
height: 400px;
}
.element {
/*
* Questo rende l’elemento alto il 50% rispetto alla sua
* dimensione parent, quindi sarà alto 200px.
* Usa `vh` per fare riferimento all’altezza della viewport.
*/
height: 50%;
}
```
L’unità di misura `vh` (viewport height) è molto utile quando si desidera un elemento che copra una certa percentuale dell’intera altezza della viewport, indipendentemente dalla dimensione dell’elemento parent. Ad esempio,
```
.fullscreen {
/* Questo rende l’elemento alto come l’intera altezza della viewport. */
height: 100vh;
}
.halfscreen {
/* Questo rende l’elemento alto la metà dell’intera altezza della viewport. */
height: 50vh;
}
```
È importante ricordare che gli elementi con un’altezza fissa o percentuale funzioneranno solo correttamente se tutti i loro elementi parent (tutti il modo su fino al `` e `
` elementi) hanno anche un’altezza definita. Se un elemento parent ha l’altezza impostata su `auto`, allora tutti i suoi child element con altezza percentuale effettivamente non avranno alcun’altezza.Infine, se si vuole avere un controllo ancora maggiore sulla dimensione degli elementi, si può considerare l’uso di CSS Flexbox o Grid, che offrono opzioni di dimensionamento più avanzate ed elastiche.
