La création d’éléments responsives en hauteur (c’est-à-dire qui s’adaptent automatiquement à la hauteur de la fenêtre du navigateur ou de la taille de l’écran) en CSS peut se faire de différentes manières.
Voici un exemple basique pour rendre un élément responsive en hauteur :
1. Utilisez les unités de mesure relatives :
La propriété `height` de CSS accepte plusieurs types d’unités de mesure. Pour rendre un élément responsive en hauteur, nous avons besoin de valeurs relatives plutôt qu’absolues. Les unités de mesure relatives comprennent le pourcentage (%), vh, vw, vmin, et vmax.
```
.div-element {
height: 50vh; /* vh est l’abréviation de “viewport height”, ce qui signifie que la hauteur de cet élément sera de 50% de la hauteur totale de la fenêtre du navigateur */
}
```
1. Utilisez les Media Queries :
Les media queries sont liées à la largeur du navigateur, mais elles peuvent aussi être liées à la hauteur. Vous pouvez également les utiliser pour rendre un élément responsive en hauteur. Par exemple :
```
@media screen and (max-height: 600px) {
.div-element {
height: 50%;
}
}
```
Dans l’exemple ci-dessus, lorsque la hauteur de l’écran est inférieure à 600px, la hauteur de l’élément `.div-element` sera de 50% de la hauteur de son élément parent.
1. Utilisez la propriété calc :
Une autre façon de créer un design responsive est d’utiliser la propriété `calc` de CSS. Elle vous permet d’effectuer des calculs pour déterminer la valeur d’une propriété. Par exemple :
```
.div-element {
height: calc(100vh – 20px);
}
```
Dans l’exemple ci-dessus, la hauteur de l’élément sera équale à la hauteur du viewport à laquelle on soustrait 20px. Cela peut être utile lorsque vous voulez qu’un élément remplisse tout l’écran, moins l’espace occupé par d’autres éléments (comme une en-tête ou une barre de navigation).
