Traduction de "
Min / Max Largeur / Hauteur en CSS " par Ahmad Shadid.
Parfois, les développeurs doivent limiter la largeur de l'élément par rapport au parent, et en même temps, le laisser dynamique. En fixant ainsi la taille initiale avec possibilité d'extension en présence d'espace disponible. Par exemple, nous avons besoin d'un bouton qui doit avoir une largeur minimale. C'est dans de telles situations qu'il est commode d'utiliser les propriétés de maximum et minimum.
Dans cet article, nous nous familiariserons avec les propriétés CSS du maximum et du minimum pour la largeur et la hauteur, et nous examinerons également en détail chacun d'eux et leurs cas d'utilisation.
Propriétés de largeur
Je voudrais commencer la discussion avec les propriétés liées à la largeur. Nous avons une
min-width max-width, et une
min-width max-width, et chacun d'eux est extrêmement important et utile dans certaines situations.
Largeur minimale (min-largeur)
La propriété
min-width est destinée à empêcher la largeur de l'élément d'être réduite en dessous de la valeur spécifiée. La valeur par défaut est
auto , qui peut aller jusqu'à
0 .
Pour le démontrer, regardons un exemple de base:
Il y a un bouton avec du texte, dont la taille peut varier d'un à plusieurs mots. Pour être sûr que ce bouton aura la largeur minimale autorisée, même s'il n'y a qu'un seul mot à l'intérieur, vous devez utiliser
min-width . La largeur minimale a été fixée à 100 pixels, donc même si le bouton a un contenu très court, tel que le mot «Terminé» ou simplement une icône, il sera toujours assez grand pour rester visible. Ceci est particulièrement important lorsque vous travaillez avec des sites traduits dans différentes langues.
Prenons l'exemple de la langue arabe sur Twitter:
Dans l'exemple ci-dessus, le bouton contient le mot "تم", qui en arabe signifie "Terminer". En raison du contenu court, la largeur du bouton lui-même est devenue trop petite, j'ai donc défini le minimum en définissant la propriété
min-width , qui peut être vue dans l'image de droite (dans la section «Après»).
Largeur et rembourrage minimum
Bien que la propriété
min-width permette d'augmenter la largeur d'un bouton tout en augmentant la taille de son contenu, le
padding doit toujours être défini sur les côtés pour garantir un retrait de ses bordures. La différence est illustrée dans la figure ci-dessous.
Largeur maximale (largeur maximale)
La propriété
max-width est conçue pour empêcher l'élément de s'étendre au-delà de la valeur spécifiée. La valeur par défaut est
none .
Un exemple simple et courant d'utilisation de max-width est de l'appliquer aux images. Considérez l'exemple ci-dessous:
Si nous appliquons la propriété
max-width: 100% à l'image, elle restera dans les limites de l'élément parent, même si sa taille d'origine est plus grande. Si l'image est initialement plus petite que le parent, cette propriété ne l'affectera en aucune façon.
Utilisation de min-width et max-width
Si les deux propriétés s'appliquent à un élément, laquelle remplacera la valeur de l'autre? En d'autres termes, quelle propriété a la priorité la plus élevée?
Si la valeur de
min-width supérieure à
max-width , elle sera considérée comme la largeur de l'élément. Prenons l'exemple suivant:
HTML <div class="wrapper"> <div class="sub"></div> </div>
CSS .sub { width: 100px; min-width: 50%; max-width: 100%; }
La valeur de
width initiale est 100px et en plus de cela, les propriétés
min-width et
max-width sont définies. Par conséquent, la largeur de cet élément ne dépassera pas 50% de la largeur du bloc parent
Propriétés de hauteur
En plus des propriétés de largeur minimale et maximale, il existe les mêmes propriétés pour la hauteur
Hauteur minimale (min-hauteur)
La
min-height conçue pour empêcher l'élément de tomber en dessous de la valeur spécifiée. La valeur par défaut est
auto , qui peut aller jusqu'à
0 .
Pour le démontrer, regardons un exemple simple.
Nous avons une section avec un contenu texte. Il est nécessaire qu'il soit beau avec de grandes et de petites quantités de texte
CSS .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; }
La hauteur minimale est fixée à 100 pixels et le contenu est centré à l'aide de la flexbox horizontalement et verticalement. Que se passe-t-il s'il y a plus de contenu? Par exemple, il y aura un paragraphe entier
Oui, vous l'avez déjà deviné. La hauteur de la section augmentera pour accueillir plus de contenu. Avec cela, nous pouvons créer des composants flexibles qui répondent à la quantité de contenu.
Hauteur maximale (hauteur maximale)
La
max-height conçue pour empêcher un élément d'augmenter sa hauteur au-delà d'une valeur spécifiée. La valeur par défaut est
none .
Dans l'exemple suivant, j'ai défini la
max-height pour le contenu. Mais comme il est plus grand que la zone spécifiée, un débordement se produit et le texte dépasse les limites de l'élément parent
Exemples d'utilisation des propriétés
Considérez quelques cas d'utilisation courants et rares pour les propriétés
min-width ,
min-height ,
max-width et
max-height .
Liste de balises
Il est recommandé d'indiquer la largeur minimale de chaque balise dans la liste des balises afin que leur apparence ne souffre pas en cas de contenu court.
Avec une telle flexibilité, une balise aura fière allure, peu importe la longueur de son contenu. Mais que se passe-t-il si l'auteur définit un très grand nom de balise et que le CMS (système de gestion de contenu) qu'il utilise n'a pas de limite sur le nombre de caractères de la balise? Dans cette situation, vous pouvez également utiliser
max-widthCSS .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
En utilisant
max-width vous pouvez limiter la largeur maximale à une valeur spécifique. Cependant, l'application de cette propriété seule ne suffit pas. Le contenu dépassant la largeur maximale doit être tronqué.
https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16Boutons
Il existe différents scénarios d'utilisation des propriétés minimum et maximum pour les boutons, car il existe également de nombreuses options pour les composants des boutons. Considérez la disposition suivante:
Veuillez noter que la largeur du bouton «Get» est trop petite. Si, pour une raison quelconque, le bouton n'a toujours pas de texte (mais seulement une icône), tout peut devenir encore pire. Dans ce cas, le réglage de la largeur minimale est très important
Remise à zéro de la largeur minimale pour Flexbox
La valeur par défaut de la propriété
min-width est auto, qui est évaluée à zéro. Lorsqu'un élément est un élément flexible, la valeur de
min-width ne devient pas nulle. La taille minimale d'un élément flexible est la taille de son contenu.
Selon le
CSSWG :
Par défaut, les éléments flexibles ne deviennent pas plus petits que la taille minimale requise par leur contenu (la longueur du mot le plus long ou de l'élément de taille fixe). Pour changer cela, définissez la
min-height min-width ou
min-height .
Prenons l'exemple suivant:
Le nom d'utilisateur contient un mot très long qui provoque un débordement et un défilement horizontal. Bien que j'aie ajouté le CSS ci-dessous pour tronquer le contenu:
CSS .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Étant donné que l'en-tête est un élément flexible, la solution consiste à réinitialiser la valeur de largeur minimale et à la faire devenir nulle
CSS .c-person__name { min-width: 0; }
Voici à quoi cela devrait ressembler après la correction:
Il résulte de la description
CSSWG que la définition de la propriété
overflow sur une valeur autre que
visible peut entraîner le calcul de la valeur de la largeur
minimale comme zéro, ce qui résout également notre problème sans avoir à définir explicitement la
min-width: 0 .
Zéro hauteur minimale pour Flexbox
Bien que ce soit un problème moins courant que la largeur minimale, il peut toujours se produire. Le problème vient des articles flexibles qui ne peuvent pas être plus courts que leur contenu. Par conséquent, la valeur
min-height est définie égale à la taille du contenu.
Prenons l'exemple suivant:
Le texte en rouge doit être coupé par les bordures du conteneur. Mais comme cet élément est un élément flexible, sa
min-height minimale est égale à la hauteur du contenu. Pour éviter cela, nous devons réinitialiser la valeur de hauteur minimale. Regardons le code HTML et CSS:
HTML <div class="c-panel"> <h2 class="c-panel__title"></h2> <div class="c-panel__body"> <div class="c-panel__content"></div> </div> </div>
CSS .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; }
L'ajout d'un élément
min-height: 0 réinitialise la valeur de la propriété et commence à fonctionner comme prévu
Démo
Utilisation de min-width et max-width en même temps
Parfois, il existe des situations où nous avons un élément avec une largeur minimale, mais en même temps, la largeur maximale n'est pas spécifiée. Cela peut conduire à l'élément devenir trop large, même si ce comportement n'était pas prévu. Prenons l'exemple suivant:
Étant donné que la largeur est définie en pixels, il n'est pas certain que ce qui précède fonctionnera pour mobile. Pour résoudre ce problème, nous pouvons utiliser des pourcentages au lieu de pixels pour les propriétés minimum et maximum. Considérez l'exemple ci-dessous:
J'ai ajouté le CSS suivant pour les images:
CSS img { min-width: 35%; max-width: 70%; }
Conteneur de page
L'un des scénarios les plus utiles pour utiliser la propriété
max-width consiste à encapsuler la page (ou le conteneur). En définissant la page à la largeur maximale, nous pouvons être sûrs qu'il sera pratique pour les utilisateurs de visualiser et de lire le contenu
Voici un exemple d'une enveloppe centrée avec un
padding gauche et à droite
CSS .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; }
Largeur maximale et unité de mesure "ch"
L'unité de mesure
ch est égale à la largeur du caractère
0 (zéro) utilisé dans la police de l'élément courant. En l'utilisant dans la propriété max-width, nous pouvons ajuster le nombre de caractères dans une chaîne. Selon cet article de Smashing Magazine, la longueur de ligne recommandée est de 45 à 75 caractères.
Dans l'exemple précédent avec un élément wrapper, nous pourrions bénéficier de l'utilisation de ce symbole, car il s'agit d'un élément article
CSS .wrapper { max-width: 70ch; }
Animer un élément de hauteur inconnue
Parfois, nous sommes confrontés au problème de l'animation d'un accordéon ou d'un menu mobile avec une hauteur de contenu inconnue. Dans ce cas, l'utilisation de
max-height peut être une bonne solution.
Prenons l'exemple suivant:
Lorsque le bouton de menu est enfoncé, le menu lui-même devrait apparaître en douceur de haut en bas. Il est impossible de le faire sans JavaScript, sauf si l'élément a une hauteur fixe (et ce n'est pas recommandé). Cependant, cela est possible avec max-height. L'idée est d'ajouter une hauteur très élevée à l'élément, par exemple,
max-height: 20rem , qui ne sera pas atteint, après quoi nous pouvons définir les étapes d'animation de
max-height: 0 , à
max-height: 20remCSS .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; }
Cliquez sur un hamburger pour voir l'animation en action
Hauteur minimale pour la section supérieure (héros)
Comme vous pouvez le voir, je n'aime pas donner aux éléments une hauteur fixe. Je pense que ce faisant, je vais à l'encontre du concept selon lequel les composants sur le Web devraient être flexibles. L'ajout d'une hauteur minimale pour la première section du site (la section «héros») est utile dans les situations où un contenu très volumineux est ajouté (cela se produit).
Prenons l'exemple suivant, où nous avons une section «héros» avec une hauteur fixe. Ça a l'air bien.
Cependant, lorsque le contenu augmente, il déborde du conteneur et dépasse le wrapper de section. C'est mauvais.
Pour éviter ce problème à l'avance, nous pouvons ajouter
min-height au lieu de
min-height . C'est exactement ce que nous faisons, au moins pour vider notre conscience. Même si cela peut être la raison d'un affichage de page plutôt étrange, je pense que de telles situations devraient être évitées en premier lieu, dans le système de gestion de contenu (CMS). Après cela, le problème est résolu et la page semble bonne:
Le problème du débordement de contenu n'est pas seulement qu'il peut être supérieur à la hauteur fixe du parent. Cela peut se produire en raison d'une diminution de la taille de l'écran et, par conséquent, d'une augmentation de la hauteur du contenu du texte en raison de la césure:
Si vous ne spécifiez pas une hauteur fixe, mais que vous la limitez uniquement au minimum en utilisant
min-height , le problème décrit ci-dessus ne se produira pas du tout.
Fenêtre modale
Pour le composant de fenêtre modale, vous devez spécifier à la fois la largeur minimale et maximale, par conséquent, cela fonctionnera sur des écrans de toute taille (du mobile au bureau). Cela rappelle un article intéressant sur CSS-Tricks, qui dit quoi faire dans ce cas.
1 voie .c-modal__body { width: 600px; max-width: 100%; }
2 voies .c-modal__body { width: 100%; max-width: 600px; }
Quant à moi, je préfère la deuxième voie, car il me suffit de définir la
max-width: 600px . Une fenêtre modale est un élément
div , elle a donc déjà une largeur définie = 100% du parent, non?
Considérez l'exemple de fenêtre modale ci-dessous. Remarquez comment la largeur devient 100% de la largeur du parent s'il n'y a pas assez d'espace libre dans la fenêtre
Hauteur minimale et pied de page collant
Lorsque le contenu de la page n'est pas suffisamment volumineux, le pied de page ne devrait pas coller au bas. Regardons un exemple qui le démontre mieux:
Veuillez noter que le pied de page ne colle pas au bord inférieur de la fenêtre du navigateur. En effet, la hauteur du contenu est inférieure à la hauteur de la fenêtre du navigateur. Après avoir résolu ce problème, la page devrait ressembler à ceci:
Tout d'abord, j'ai fait de l'élément corps un conteneur flexible, puis je l'ai défini à une hauteur minimale de 100% de la fenêtre.
CSS body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; }
Je recommande de lire cet
article sur les pieds de page collants.
DémoTailles d'élément proportionnelles et largeur / hauteur max.
Pour créer un conteneur proportionnel qui évolue en fonction de la taille de la fenêtre, un
hack a été présenté une fois
avec un rembourrage . Nous pouvons maintenant simuler un comportement similaire en combinant des unités de fenêtre et une largeur / hauteur maximale.
Sur la base des documents d'un
article de Miriam Suzanne, je veux expliquer comment cela fonctionne.
Nous avons une image avec des dimensions de 644 x 1000 pixels. Nous devons faire ce qui suit:
- Rapport
height / width (hauteur divisée par la largeur)
- Largeur du conteneur: peut être fixe ou dynamique (100%)
- Définissez la
height à 100% de la largeur de la fenêtre multipliée par le rapport hauteur / largeur
- Définir une
max-height égale à la largeur du conteneur multipliée par le rapport max-height largeur
- Définir une
max-width égale à la largeur du conteneur
CSS img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); }
HTML / Body avec une hauteur de 100%
Et si nous voulons que l'élément de corps occupe 100% de la hauteur de la fenêtre? C'est une question courante à la fois dans la communauté Web dans son ensemble et
sur le site StackOverflow en particulier.
Vous devez d'abord définir la
height: 100% de l'élément
html . Cela garantira que l'élément racine est à 100% élevé. Ajoutez ensuite
min-height pour l'élément
body . La raison pour laquelle
min-height est utilisée est que cette propriété permet à la hauteur de l'élément
body d'être dynamique et d'ajuster la taille du contenu.
CSS html { height: 100%; } body { min-height: 100%; }
DémoRemarques
Largeur minimale et éléments de bloc
Parfois, nous oublions que l'élément auquel nous essayons d'appliquer la
min-width est un bloc. En fin de compte, cela peut être source de confusion et ne pas affecter l'élément. Assurez-vous que l'article n'est pas en bloc
Fonctions de comparaison CSS
En recherchant sur StackOverflow les principaux problèmes auxquels les développeurs sont confrontés, je suis tombé sur cette question dans laquelle l'auteur pose les questions suivantes:
Est-il possible de faire quelque chose comme ça? max-width: calc(max(500px, 100% - 80px)) ou peut-être c'est max-width: max(500px, calc(100% - 80px)))
Le comportement souhaité consiste à ne pas maintenir la largeur de l'élément supérieure à 500 pixels. Si la largeur de la lunette n'est pas suffisante pour accueillir l'élément, alors la largeur doit être de
100% – 80px .
Quant à la solution publiée en réponse à la question, j'ai essayé de l'appliquer et elle fonctionne dans Chrome 79 et Safari 13.0.3. Bien que cela dépasse le cadre de l'article, je donnerai toujours une solution ici:
CSS .yourselector { max-width: calc(100% - 80px); } @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } }
Sources et documents pour complément d'étude