Attribut MIN-HEIGHT

Rôle

L’attribut min-height permet de spécifier la hauteur minimum d’une boite

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.minHeight

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

section{
  height: 105px;
  background-color: rgb(220,220,220);
}
div{
  width: 30%;
  height: 50%;
  float: left;
  background-color: pink;
}
div.minWidth{
  min-height: 80px;
  height: 50%;
  background-color: orange;
}

– Le code HTML

<section>
  <div>Texte</div>
  <div class="minHeight">min-hidth:600px </div>
</section>

Résultat

Les boites orange et rose ont une hauteur fixée à 50% pourcentage de la hauteur du conteneur gris. Mais la boite orange à une hauteur minimum de 80px

Compatibilité

L’attribut min-height est pris en charge par tous les principaux navigateurs
A partir d’ Internet Explorer 7

Valeurs

Les différentes valeurs de l’attribut min-height sont:

length

Définit une valeur en px, pt, cm, em.
Syntaxe :
min-height : 20px

pourcentage

Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
min-height : 30%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
min-height : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
min-height : inherit

A voir aussi

border clip width margin padding overflow min-height min-heightoutline resize