diff options
Diffstat (limited to 'files/fr/web/css/min-height/index.md')
| -rw-r--r-- | files/fr/web/css/min-height/index.md | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/fr/web/css/min-height/index.md b/files/fr/web/css/min-height/index.md new file mode 100644 index 0000000000..8e1229db64 --- /dev/null +++ b/files/fr/web/css/min-height/index.md @@ -0,0 +1,138 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/min-height +--- +<div>{{CSSRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> + +<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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* Valeur de longueur */ +/* Type <length> */ +min-height: 3.5em; + +/* Valeur relative au bloc */ +/* Type <percentage> */ +min-height: 10%; + +/* Valeurs avec un mot-clé */ +min-height: max-content; +min-height: min-content; +min-height: fit-content; +min-height: fill-available; + +/* Valeurs globales */ +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> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> Lorem ipsum tralala +<p class="exemple">toto</p> + Duis aute irure dolor in reprehender +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + height: 150px; + border: solid 1px red; +} + +.exemple { + min-height: 70%; + border: solid 1px blue; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<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> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.min-height")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> |