CSS display : table min-height ne fonctionne pas

Question

Quelqu'un sait-il que je peux faire fonctionner la hauteur minimale avec les derniers navigateurs ? J'utilise des tableaux CSS et il semble que la hauteur minimale soit ignorée.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

Violon

Answer 1

Lorsque vous utilisez des tableaux, la hauteur est essentiellement la hauteur minimale, car les tableaux s'étirent toujours. Supprimez simplement le "min-" et tout fonctionnera comme vous le souhaitez.

Answer 2

Utilisez height: 1px; sur le tableau ou toute autre valeur. En fait, vous devez donner une certaine hauteur à la table pour qu'elle fonctionne avec min-height . Ayant seulement min-height ne fonctionne pas sur les tables sur firefox.

Answer 3

Solution pour Firefox

Ajouter hauteur pour déverrouiller le réglage de la hauteur minimale

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

Le nombre dans la hauteur peut être n'importe quelle autre valeur réelle inférieure ou égale à min-height pour que cela fonctionne comme prévu.

Answer 4

Chaque fois que vous utilisez display:table; ou toute autre propriété plus profonde comme display:table-cell; envisager d'utiliser height au lieu de min-height . Comme dans les tableaux, hauteur = hauteur minimale, compte tenu de la fonction d'auto-portée qu'ils comportent.