Affichage CSS: la hauteur minimale de la table ne fonctionne pas

Est-ce que quelqu'un sait que je peux faire fonctionner une hauteur minimale avec les derniers navigateurs? J'utilise des tables CSS et il semble ignorer min-height.

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

Violon

Lorsque vous utilisez des tables, la hauteur est essentiellement la hauteur minimale, car les tables s'étirent toujours. Débarrassez-vous simplement du "min-" et cela fonctionnera comme prévu.

Utilisez height: 1px;sur la table ou n'importe quelle valeur. En gros, vous devez donner une certaine hauteur à la table pour qu'elle fonctionne min-height. Avoir seulement min-heightne fonctionnera pas sur les tables sur Firefox.

Chaque fois que vous utilisez display:table;ou une propriété plus profonde comme, display:table-cell;envisagez d'utiliser à la heightplace de min-height. Comme dans les tables height = min-height compte tenu de la fonction d'auto-envergure qu'elles contiennent.

Solution pour Firefox

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

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

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