1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
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 class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<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="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">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>
|
