Propriétés physiques min-height et min-width.
Les propriétés logiques min-block-size et min-inline-size.
Résumé des caractéristiques de la propriété min-height
automin-height passe progressivement d'une valeur à une autre.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.
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.
<——— min-width ———><——— min-height ———>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 CSS de dimension.
S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions du parent, avec les conventions suivantes:
min-widthest calculé par rapport à la largeur de l'élément parent.min-heightest 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-contentetfit-content. - min-height:
initial; min-height:inherit; min-height:revert; min-height:revert-layer; min-height:unset;La valeur initiale est :
auto
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.
Prise en charge par les navigateurs (compatibilité).
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.
min-height et min-width, indépendantes du sens d'écriture.
min-block-size et min-inline-size, dépendantes du sens d'écriture en fonction de la langue.
auto dans la syntaxe de ces quatre propriétés.
stretch dans la syntaxe de ces propriétés.
fit-content() en tant que valeur de l'une des propriétés min-....
min-width
min-heightmin-inline-size min-block-sizeautostretchfit-content()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que min-height.
Les spécifications CSS éditées par le W3C sont organisées en modules. min-height fait partie du Module CSS - Dimensionnement des blocs (CSS Box Sizing Module). Les définitions suivantes sont également décrites dans ce même module.