diff options
Diffstat (limited to 'files/fr/web/css/height/index.md')
| -rw-r--r-- | files/fr/web/css/height/index.md | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md new file mode 100644 index 0000000000..e1e0f46885 --- /dev/null +++ b/files/fr/web/css/height/index.md @@ -0,0 +1,175 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>height</code></strong> définit la hauteur de la boîte de contenu d'un élément. <a href="/fr/docs/CSS/box_model#content">La boîte de contenu</a> est à l'intérieur de la boîte de remplissage (<em>padding</em>) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut <code>border-box</code>, cette propriété détermine la hauteur de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">la boîte de marge</a>.</p> + +<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div> + +<p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */ +height: auto; + +/* Valeurs de longueur */ +/* Type <length> */ +height: 120px; +height: 10em; + +/* Valeurs relatives proportionnelles */ +/* Type <percentage> */ +height: 75%; + +/* Valeurs globales */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Une valeur de longueur absolue. Voir la page {{cssxref("<length>")}} pour les unités qui peuvent être utilisées.</dd> + <dt><code><percentage></code></dt> + <dd>La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément</dd> + <dt><code>auto</code></dt> + <dd>Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.</dd> + <dt><code>fill</code> {{experimental_inline}}</dt> + <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>La hauteur intrinsèque préférrée.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>La hauteur intrinsèque minimale.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (<em>padding</em>) vertical.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>La plus grande des valeurs entre : + <ul> + <li>La hauteur minimale intrinsèque.</li> + <li>Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible</li> + </ul> + </dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>Je mesure 50 pixels de haut.</span> +</div> +<div id="green"> + <span>Et moi je mesure 25 pixels de haut.</span> +</div> +<div id="parent"> + <div id="child"> + <span>Je suis moitié moins haut que mon parent.</span> + </div> +</div> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemple')}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>height</code> peut désormais être animée.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ajout de la prise en charge des valeurs de type {{cssxref("<length>")}} et précision sur les éléments auxquels la propriété s'applique.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</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.height")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("max-height")}}</li> +</ul> |