Min-height et min-width - Propriétés CSS.

Description des propriétés.

Les propriétés physiques min-height et min-width.

Les deux propriétés min-height et min-width définissent les limites minimales pour les dimensions d'un élément. En cas de contradiction, elles sont prioritaires sur les propriétés width et height.

Ces deux propriétés sont intéressantes à combiner avec des dimensions exprimées en pourcentages. On obtient ainsi un élément qui s'adapte à la taille de l'écran mais qui reste dans des limites acceptables.

Voir également les propriétés max-height et max-width.

Les propriétés logiques min-block-size et min-inline-size.

Ces deux propriétés sont dites "logiques" : elles agissent en fonction du mode d'écriture de la langue de l'élément. Pour les langues latines min-inline-size est équivalente à min-width et min-block-size est équivalente à min-height.

Les propriété et existent également.

Prise en charge du mode d'écriture et de la langue.

Les propriétés logiques min-block-size et min-inline-size ont le même rôle que les propriétés physiques min-height et min-width, mais elles prennent en compte la direction et le mode d'écriture. Ce qui donne les équivalences suivantes, en fonction de la langue.

Syntaxes pour les propriétés min-height et min-width.

Les exemples ci-après ne concernent que les propriétés physiques, mais les propriétés logiques min-block-size et min-inline-size ont une syntaxe exactement identiques. Pour cette raisons, elles ne sont pas citées dans les exemples.

• min-height: auto; min-width: auto;

  Les valeurs minimales pour la hauteur et la largeur de l'élément sont déterminées par le navigateur, ce qui revient le plus souvent à ne pas fixer de dimensions minimales.

• min-height: 400px; min-width: 400px;

  Une limite minimale est fixée pour les dimensions de l'élément à la valeur indiquée. Celle-ci doit être une valeur positive, du type dimension. Voir les unités de dimension.

  S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions du parent, avec les conventions suivantes:

  1. min-width est calculé par rapport à la largeur de l'élément parent.
  2. min-height est calculé par rapport à la hauteur de l'élément parent, à condition que celle-ci soit fixée. Dans le cas contraire, les pourcentages sont assimilés à auto.
• min-width: min-content; min-width: max-content; min-width: fit-content;

  Ces trois valeurs permettent de calculer une largeur minimale en fonction du contenu de l'élément :

  • min-content : la largeur la plus petite sans césure. Cela correspond en général à la longueur du mot le plus long du texte.
  • max-content : la largeur la plus grande. Aucun retour à la ligne n'est ajouré en plus de ceux qui sont spécifiés dans le document.
  • fit-content : la largeur la plus grand possible, compte tenu du contenu et de la place disponible.

  Des explications plus détaillées et des exemples sont disponibles sur la page de cdes valeurs : min-content, max-content et fit-content.

• min-height: stretch; min-width: stretch;

  En attente de définition.

• min-height: initial; (auto) min-height: inherit; min-height: revert; min-height: revertLayer; min-height: unset;

  min-width: initial; (auto) min-width: inherit; min-width: revert; min-width: revertLayer; min-width: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Animation des propriétés min-height et min-width.

L'animation des propriétés min-height et min-width n'est pas très spectaculaire. L'effet peut même être invisible si les dimensions de l'élément sont au dessus des valeurs minimales imposées par l'animation.

Compatibilité des navigateurs avec min-height.

Pas de problème de compatibilité sur les propriétés max-height et max-width elles même, ni avec les propriétés logiques équivalentes. Mais certaines valeurs récemment définies ne sont pas encore prises en charge.
En particulier la valeur stretch et la fonction fit-content(). Pour cette dernière, il est cependant possible d'activer la fonctionnalité sur Firefox   en positionnant un flag (accéder aux flags sur Firefox).

Remarques :

(1) Depuis CSS2.1, Firefox et Opera appliquent les propriétés min-width et min-height également aux éléments table.

(3) Utilise provisoirement la valeur non standard -webkit-fill-available à la place de stretch.

(2) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.fit-content-function.enabled à true.

1

Propriétés
min-width
min-height

2

Propriétés
min-inline-size
min-block-size

3

Valeur
auto

4

Valeur
stretch

5

Fonction
fit-content()

Estimation de la prise en charge globale.

97%

96%

96%

0%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

3

Edge

3

Opéra

1

3

Safari

3

Safari sur IOS

3

Androïd Brower

3

Chrome pour Androïd

3

Firefox pour Androïd

Samsung Internet

3

Firefox

1

2

Chrome

3

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété min-height

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Définition première des propriétés min-height et min-width.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction des propriétés logiques min-block-size et min-inline-size.
  Les propriétés logiques s'adaptent au mode d'écriture de la langue.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 3

  Ajout des valeurs pour les propriétés min... : auto, min-content, max-content et de la fonction fit-content().
  

  27 Septembre 2012

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 4

  Pas de changement concernant les propriétés min-height et min-width.
  

  26 Mai 2020

  Document de travail.

  

  

  

Voir aussi, dans le même module que min-height

Les spécifications CSS éditées par le W3C sont organisées en modules. Les propriétés min-height et min-width font partie du module CSS Box Sizing Module, ainsi que les propriétés logiques min-inline-size et min-block-size. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :

Valeurs: