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

104

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

css

— Samantha JT Star
source

1

article similaire: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

Pouvez-vous définir des tables CSS ? Vous avez un balisage?

— alex

1

postez votre html, le css correspondant et, si possible, donnez un lien vers votre site (ou essayez de construire un jsfiddle.net ) pour montrer votre problème.

— oezi

C'est toujours un problème avec FireFox, bien que le bogue soit signalé depuis quatorze ans. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

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.

— swider
source

13

Ceci est complètement peu intuitif, mais juste. Les meilleurs résultats semblent venir en mettant la hauteur «fixe» sur les display: table-celléléments les plus intérieurs .

— eternicode

4

Je n'ai pas testé dans IE mais il semble que Firefox soit le seul encore affecté par cela.

— Dex

2

Confirmé que cela heightfonctionne et min-heightne fonctionne pas dans Chrome 37, Safari 7 et FF 32 sur mac. IE11 sur Win 8.1 donne le comportement correct dans les deux. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Pas vrai. Si je veux qu'une table mesure AU MOINS 8 pouces de hauteur (j'utilise css pour le contrôle d'impression) et qu'il manque suffisamment de lignes pour la remplir, mais que j'ai un tfoot défini, je peux fournir une ligne d'espacement (autorisée à s'étirer verticalement), tout en définissant hauteur sur mes autres rangées pour m'assurer qu'ils ne le font pas et ce que j'obtiens est un grand espace qui maintient mon pied de page là où il devrait être. Fonctionne très bien dans Chrome, mais pas FF ou le convertisseur PDf que j'utilise; wkhtmltopdf. Oui, la hauteur fonctionne, mais ne signifie pas la même chose sémantiquement que hauteur min.

— rainabba

7

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.

— virajs0ni
source

4

OP demande comment le faire fonctionner avec le dernier navigateur. Je lui ai juste donné une solution. En quoi n'est-ce pas exact?

— virajs0ni

donnez une hauteur comme la hauteur: 1px comme vous l'avez dit, puis ça a commencé à fonctionner

— Mohamed Hussain

1

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.

— Ahmad Awais
source

1

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.

— Mike Winchester
source