From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/min-height/index.md | 178 +++++++++++++++++++---------------- 1 file changed, 96 insertions(+), 82 deletions(-) (limited to 'files/fr/web/css/min-height') diff --git a/files/fr/web/css/min-height/index.md b/files/fr/web/css/min-height/index.md index 8e1229db64..8a18f9726b 100644 --- a/files/fr/web/css/min-height/index.md +++ b/files/fr/web/css/min-height/index.md @@ -7,22 +7,23 @@ tags: - Reference translation_of: Web/CSS/min-height --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété min-height est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à min-height.

+La propriété** `min-height`** est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à `min-height`. -
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+{{EmbedInteractiveExample("pages/css/min-height.html")}} -

La valeur de la propriété min-height surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque min-height est supérieure.

+La valeur de la propriété `min-height` surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque `min-height` est supérieure. -

Syntaxe

+## Syntaxe -
/* Valeur de longueur */
-/* Type <length>      */
+```css
+/* Valeur de longueur */
+/* Type       */
 min-height: 3.5em;
 
 /* Valeur relative au bloc */
-/* Type <percentage>       */
+/* Type        */
 min-height: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -35,41 +36,42 @@ min-height: fill-available;
 min-height: inherit;
 min-height: initial;
 min-height: unset;
-
- -

Valeurs

- -
-
<length>
-
La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("<length>")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
-
<percentage>
-
La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("<percentage>")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
-
max-content {{experimental_inline}}
-
La hauteur intrinsèque préférée.
-
min-content {{experimental_inline}}
-
La hauteur intrinsèque minimale préférée.
-
fill-available{{experimental_inline}}
-
La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (padding). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : available.
-
fit-content {{experimental_inline}}
-
Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de min-content. La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- `` + - : La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("<length>")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide. +- `` + - : La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("<percentage>")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide. +- `max-content` {{experimental_inline}} + - : La hauteur intrinsèque préférée. +- `min-content` {{experimental_inline}} + - : La hauteur intrinsèque minimale préférée. +- `fill-available`{{experimental_inline}} + - : La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : `available`. +- `fit-content` {{experimental_inline}} + - : Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de `min-content.` La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale. + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

+### HTML -
<div> Lorem ipsum tralala
-<p class="exemple">toto</p>
+```html
+
 Lorem ipsum tralala
+
toto

  Duis aute irure dolor in reprehender
-</div>
+ +``` -

CSS

+### CSS -
div {
+```css
+div {
   height: 150px;
   border: solid 1px red;
 }
@@ -78,61 +80,73 @@ min-height: unset;
   min-height: 70%;
   border: solid 1px blue;
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available.
{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}{{Spec2('CSS3 Flexbox')}} -

Ajout du mot-clé auto et définition de ce mot-clé comme valeur initiale.

-
{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}{{Spec2('CSS3 Transitions')}}min-height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}Définition initiale.
SpécificationStatutCommentaires
+ {{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}} + {{Spec2('CSS3 Sizing')}} + Ajout des mots-clés max-content, min-content, + fit-content et fill-available. +
+ {{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}} + {{Spec2('CSS3 Flexbox')}} +

+ Ajout du mot-clé auto et définition de ce mot-clé comme + valeur initiale. +

+
+ {{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}} + {{Spec2('CSS3 Transitions')}}min-height peut désormais être animée.
+ {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}} + {{Spec2('CSS2.1')}}Définition initiale.
-

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.min-height")}}

+{{Compat("css.properties.min-height")}} -

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("width")}}
    • -
  • {{cssxref("height")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • Le modèle de boîtes
    • -
  • {{cssxref("min-width")}}
    • -
  • {{cssxref("box-sizing")}}
    • -
  • {{cssxref("height")}}
    • -
  • {{cssxref("max-height")}}
    • -
+- {{cssxref("width")}} +- {{cssxref("height")}} +- {{cssxref("max-height")}} +- [Le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) +- {{cssxref("min-width")}} +- {{cssxref("box-sizing")}} +- {{cssxref("height")}} +- {{cssxref("max-height")}} -- cgit v1.2.3-54-g00ecf