Différence entre height, min-height, max-height, width, min-width, max-width
Tags: html, css, web3, beginners
Published: 2024-02-11 18:19:27

## Définition de width et height

Les propriétés **CSS** **width** et **height** permettent respectivement de spécifier la largeur et la hauteur d'un élément.

Pour voir la différence entre chacun des élements nous allons utiliser le code de base suivant:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Height Only</title>
</head>
<body>
    <div class="app">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>
</html>
<style>
    .app {
        /* On écrira ici le code de la demo */
        background-color: yellow;
        border: solid 2px black;
    }
</style>
```
## Propriété height

### height sans contrainte

La propriété **height** permet d'appliquer une hauteur à un élément *html*. La valeur peut être absolue en pixel ou relative en pourcentage.

Si on applique une valeur absolue de 20 pixels à notre *div* précédente en remplaçant le *style* par:

```css
<style>
    .app {
        height: 20px;
        background-color: yellow;
        border: solid 2px black;
    }
</style>
```

On obtient le résultat suivant:


![Résultat hauteur sans débordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32ncdk65zk0zlxmhd9de.png)

Le texte à l'intérieur de la *div* déborde car le texte est plus grand que 20 pixels.

Si on veut faire contenir le contenu (le texte) dans le conteneur (la div) on peut utiliser la propriété css *overflow: auto*. Ce qui donne comme style:

```css
<style>
    .app {
        height: 20px;
        overflow: auto;
        background-color: yellow;
        border: solid 2px black;
    }
</style>
```
Avec la propriété *overflow: auto;* le contenant restera à l'intérieur du conteneur avec une barre de défilement verticale.


![Résultat hauteur avecdébordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfyllepr66ulkcz1fih7.png)

### height avec min

On peut précéder la propriété **height** de **min**. Dans ce cas le mode de fonctionnement change:

Si on utilise **min-height** celà signifie que l'élément ne peut avoir une hauteur plus pétite que celle spécifiée même si la hauteur de l'écran est plus pétite que la hauteur spécifiée.

Si on change le style par:

```css
<style>
    .app {
        min-height: 510px;
        overflow: auto;
        background-color: yellow;
        border: solid 2px black;
    }
</style>
```

La hauteur de la page web sera au minimum égale à la hauteur spécifiée même si le contenu de la *div* ne dépasse pas la valeur spécifiée. Par exemple sur un écran de 648 x 530 (largeur x hauteur) aura comme résultat.


![Résultat hauteur minimale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqfk0odu31nifbyq2dr3.png)

Dans l'exemple précédent on voit que la *div* a gardé sa hauteur minimun de 510 pixels même si le texte à l'intérieur ne dépasse pas les 510 pixels.

**Si jamais on applique une valeur min-height à la *div* et que le contenu de la *div* a une hauteur plus grande que la valeur spécifiée, la *div* aura comme hauteur celle de son contenu.**

Par exemple si on applique le style suivant:

```css
<style>
    .app {
        min-height: 30px;
        background-color: yellow;
        border: solid 2px black;
    }
</style>
```

On obtient comme résultat:


![Résultat hauteur minimale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81mpbdaty1iiwi7yopjs.png)

Ici la valeur de la *div* a pris la valeur de son contenu le texte.

Pour résumer les règles d'application:

|       Style       |                   Condition                                                     |                  Action                  |
|-------------------|---------------------------------------------------------------------------------|------------------------------------------|
| min-height: 20px; |  Si le contenu de la *div* peut être affiché sur une hauteur de 50 pixels alors | la hauteur de la *div* sera de 50 pixels |
| min-height: 20px; |  Si le contenu de la *div* peut être affiché sur une hauteur de 10 pixels alors | la hauteur de la *div* sera de 20 pixels |


### height avec max

Quand on utilise la propriété **max-height**, celà signifie que l'élément ne peut avoir qu'au maximun la hauteur spécifiée.

Le fonctionnement ici est un peu différent:

+ Si le contenu de l'élément a une hauteur plus grande que la hauteur maximale spécifiée, on aura un débordement comme ci dessous:
    ```css
    <style>
        .app {
            max-height: 50px;
            background-color: yellow;
            border: solid 2px black;
        }
    </style>
    ```
    Ce qui donne comme résultat:


![Résultat hauteur maximale avec débordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lpfdgqgz083mm8x55n1.png)

**Pour éviter le débordement on peut appliquer la proprité *overflow: auto;* pour avoir le résultat:**


![Résultat hauteur maximale sans débordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdn549ia8aga6e5j65aa.png)

+ Si le contenu de l'élément a une hauteur plus pétite que la hauteur maximale spécifiée, le conteneur prend la hauteur du contenu comme ci-dessous:
    ```css
    <style>
        .app {
            max-height: 300px;
            background-color: yellow;
            border: solid 2px black;
        }
    </style>
    ```
    Ce qui donne comme résultat:


![Résultat hauteur maximale avec débordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/688m3h4myf61mko8h4wg.png)

Peut importe la valeur du **max-height** dès l'instant qu'elle est plus grande que la taille du contenu on obtient le même résultat.

```css
    <style>
        .app {
            max-height: 1000px;
            background-color: yellow;
            border: solid 2px black;
        }
    </style>
 ```
 
ou

```css
    <style>
        .app {
            max-height: 1300px;
            background-color: yellow;
            border: solid 2px black;
        }
    </style>
 ```
Donnera le même résultat identique à celui affiché plus haut:

![Résultat hauteur maximale avec débordement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/688m3h4myf61mko8h4wg.png)

Pour résumer les règles d'application:

|       Style       |                   Condition                                                     |                  Action                 |
|-------------------|---------------------------------------------------------------------------------|-----------------------------------------|
| max-height: 20px; |  Si le contenu de la *div* peut être affiché sur une hauteur de 50 pixels alors | la hauteur de la *div* sera de 20 pixels avec débordement du contenu sur 30 pixels |
| min-height: 20px; |  Si le contenu de la *div* peut être affiché sur une hauteur de 10 pixels alors | la hauteur de la *div* sera de 10 pixels identique à celle de son contenu|

Pour plus d'information sur la propriété consulter [height](https://developer.mozilla.org/fr/docs/Web/CSS/height).

## Propriété width

La propriété **width** est identique à la propriété **height** sauf que la règle s'applique sur la largeur. Ce qui donne les régles suivantes:

|       Style       |                   Condition                                                     |                  Action                  |
|-------------------|---------------------------------------------------------------------------------|------------------------------------------|
| min-width: 20px;  |  Si le contenu de la *div* peut être affiché sur une largeur de 50 pixels alors | la largeur de la *div* sera de 50 pixels |
| min-width: 20px;  |  Si le contenu de la *div* peut être affiché sur une largeur de 10 pixels alors | la largeur de la *div* sera de 20 pixels |
| max-width: 20px;  |  Si le contenu de la *div* peut être affiché sur une largeur de 50 pixels alors | la largeur de la *div* sera de 20 pixels avec débordement du contenu sur 30 pixels sur la largeur |
| min-width: 20px; |  Si le contenu de la *div* peut être affiché sur une largeur de 10 pixels alors | la largeur de la *div* sera de 10 pixels identique à celle de son contenu|

**Comme pour la propriété *height* on peut appliquer la propriété *overflow: auto;* dans le cas du *width* le contenu restera à l'intérieur du conteneur avec une barre de défilement verticale.**

**On peut aussi utiliser les deux propriétés sur un même élément.**

Pour plus d'information sur la propriété consulter [width](https://developer.mozilla.org/fr/docs/Web/CSS/width).