diff options
Diffstat (limited to 'files/fr/web/css/min-height/index.md')
| -rw-r--r-- | files/fr/web/css/min-height/index.md | 178 |
1 files changed, 96 insertions, 82 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété<strong> <code>min-height</code></strong> 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 à <code>min-height</code>.</p> +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`. -<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> +{{EmbedInteractiveExample("pages/css/min-height.html")}} -<p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p> +La valeur de la propriété `min-height` surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque `min-height` est supérieure. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Valeur de longueur */ -/* Type <length> */ +```css +/* Valeur de longueur */ +/* Type <length> */ min-height: 3.5em; /* Valeur relative au bloc */ -/* Type <percentage> */ +/* Type <percentage> */ 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; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><length></code></dt> - <dd>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.</dd> - <dt><code><percentage></code></dt> - <dd>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.</dd> - <dt><code>max-content</code> {{experimental_inline}}</dt> - <dd>La hauteur intrinsèque préférée.</dd> - <dt><code>min-content</code> {{experimental_inline}}</dt> - <dd>La hauteur intrinsèque minimale préférée.</dd> - <dt><code>fill-available</code>{{experimental_inline}}</dt> - <dd>La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : <code>available</code>.</dd> - <dt><code>fit-content</code> {{experimental_inline}}</dt> - <dd>Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de <code>min-content.</code> 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.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +### 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 {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div> Lorem ipsum tralala -<p class="exemple">toto</p> +```html +<div> Lorem ipsum tralala +<p class="exemple">toto</p> Duis aute irure dolor in reprehender -</div></pre> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { height: 150px; border: solid 1px red; } @@ -78,61 +80,73 @@ min-height: unset; min-height: 70%; border: solid 1px blue; } -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples")}}</p> +{{EmbedLiveSample("Exemples")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td> - <td>{{Spec2('CSS3 Sizing')}}</td> - <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td> - <p>Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme valeur initiale.</p> - </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>min-height</code> peut désormais être animée.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td> + {{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}} + </td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td> + Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, + <code>fit-content</code> et <code>fill-available</code>. + </td> + </tr> + <tr> + <td> + {{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}} + </td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td> + <p> + Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme + valeur initiale. + </p> + </td> + </tr> + <tr> + <td> + {{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}} + </td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>min-height</code> peut désormais être animée.</td> + </tr> + <tr> + <td> + {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}} + </td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> </table> -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.min-height")}}</p> +{{Compat("css.properties.min-height")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("width")}}</li> - <li>{{cssxref("height")}}</li> - <li>{{cssxref("max-height")}}</li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> - <li>{{cssxref("min-width")}}</li> - <li>{{cssxref("box-sizing")}}</li> - <li>{{cssxref("height")}}</li> - <li>{{cssxref("max-height")}}</li> -</ul> +- {{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")}} |