ZONE CSS
Information accessibilité
Définition de la css height
Définition de height
La propriété de feuilles de style css height permet de spécifier la hauteur d'un élément.
height:200px;
}
La propriété de feuilles de style css height peut prendre une valeur :
- numérique positive suivie de px ou %(le pourcentage est calculé par rapport à la hauteur du bloc qui contient l'élément) ou ex ou em.
- auto, valeur par défaut.
- inherit, hérite de la propriété de son parent (css 2)
Exemple de code :
.identifiant{
height:200px;
}
La propriété de feuilles de style css height peut prendre une valeur :
- numérique positive suivie de px ou %(le pourcentage est calculé par rapport à la hauteur du bloc qui contient l'élément) ou ex ou em.
- auto, valeur par défaut.
- inherit, hérite de la propriété de son parent (css 2)
Application des height
La propriété de feuille de style height css est applicable sur toutes les balises HTML ou XHTML qui ne sont pas "en-ligne" ou "display:inline" (b, span, ...).
La propriété de feuille de style height css peut remplacer en HTML l'attribut HTML HEIGHT.
Problèmes des height
La propriété de feuille de style css height peut poser un problème d'interprétation si le élément est de type "inline" (span, b, i par exemple).
FAQ
Répond aux questions suivantes :
Comment spécifier modifier la hauteur d'un bloc?
Liste des questions les plus fréquemment posées en css.
Liste des questions les plus fréquemment posées en css.
Exemples et astuces css
Info complémentaire
Il est possible que sous Opéra et Netscape 6, la feuille de style "height" ne soit pas interprétée si vous ne mettez pas avant la feuille de style "display:block" notament pour la balise Html "SPAN" ou "DIV" (ne marche pas sous Nets4.7):
display:block;
height:300px;
}
Cette remarque n'est pas valable si vous utiliser "SPAN" ou "DIV" en tant que claque.
Exemple de code :
SPAN {
display:block;
height:300px;
}
Cette remarque n'est pas valable si vous utiliser "SPAN" ou "DIV" en tant que claque.
Une hauteur plus petite que son contenu
Si le conteneur a une hauteur (height) plus petite que son contenu, sous Internet Explorer le contenu agrandit la hauteur, alors que Netscape / FireFox le contenu sort de la balise mais le conteneur est à la bonne taille.
Code CSS :
width:200px;
height:50px;
border:1px solid #000000;
}
.contenu{
background-color:red;
margin:0 0 50px 0;
}
Code HTML :
<div class="contenu"> Sous IE, j'agrandis mon parent</div>
</div>
Dans le cas où la hauteur du conteneur (parent) est véritablement plus petite que son contenu vous devez spécifier au parent la propriété overflow:hidden.
Dans le cas où vous voulez que la hauteur du parent s'adapte au contenu, vous devez spécifier au parent la propriété height:auto
Code CSS :
Exemple de code :
#conteneur{
width:200px;
height:50px;
border:1px solid #000000;
}
.contenu{
background-color:red;
margin:0 0 50px 0;
}
Code HTML :
Exemple de code :
<div id="conteneur">
<div class="contenu"> Sous IE, j'agrandis mon parent</div>
</div>
Dans le cas où la hauteur du conteneur (parent) est véritablement plus petite que son contenu vous devez spécifier au parent la propriété overflow:hidden.
Dans le cas où vous voulez que la hauteur du parent s'adapte au contenu, vous devez spécifier au parent la propriété height:auto
BUG INTERNAUTE
Explication
Vous trouverez ci-dessous divers bugs d'interprétation de la css height.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.