Exibição CSS: a altura mínima da tabela não funciona

104

Alguém sabe que posso fazer com que a altura mínima funcione com os navegadores mais recentes? Estou usando tabelas CSS e parece ignorar min-height.

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

Violino

css Samantha JT Star
fonte
1
postagem semelhante: stackoverflow.com/questions/25238/100-min-height-css-layout
diEcho
1
Você pode definir tabelas CSS ? Tem alguma marcação?
alex,
1
poste seu html, o css correspondente e, se possível, dê um link para seu site (ou tente construir um jsfiddle.net ) para mostrar seu problema.
oezi,
Isso ainda é um problema com o FireFox, embora o bug seja relatado há quatorze anos. bugzilla.mozilla.org/show_bug.cgi?id=307866
Frédéric

Respostas:

204

Ao usar tabelas, a altura é essencialmente altura mínima, pois as tabelas sempre se estendem. Basta se livrar do "min-" e ele funcionará como você espera.

swider
fonte
13
Isso é completamente não intuitivo, mas exato. Os melhores resultados parecem surgir colocando a altura "fixa" nos display: table-cellelementos mais internos.
eternicode
4
Não testei no IE, mas parece que o Firefox é o único ainda afetado por isso.
Dex
2
Confirmado que heightfunciona e min-heightnão funciona no Chrome 37, Safari 7 e FF 32 no mac. O IE11 no Win 8.1 oferece o comportamento correto em ambos. jsfiddle.net/nuwcyvwn/1
Stephan Muller
1
Não é verdade. Se eu quiser que uma tabela tenha PELO MENOS 8 polegadas de altura (eu uso css para o controle de impressão) e ela não tiver linhas suficientes para preenchê-la, mas eu tenho um tfoot definido, posso fornecer uma linha espaçadora (com permissão para esticar verticalmente), ao definir altura nas minhas outras linhas para garantir que não o façam e o que obtenho é uma grande lacuna que mantém o meu rodapé onde deveria estar. Funciona muito bem no Chrome, mas não no FF ou no conversor PDf que estou usando; wkhtmltopdf. Sim, a altura funciona, mas não significa a mesma coisa semanticamente que altura mínima.
rainabba
7

Use height: 1px;na mesa ou qualquer valor. Basicamente, você precisa dar à mesa alguma altura para fazê-la funcionar min-height. Ter apenas min-heightnão funcionará em tabelas no firefox.

virajs0ni
fonte
4
OP está perguntando como fazê-lo funcionar com o navegador mais recente. Eu apenas dei a ele uma solução. Como não é preciso?
virajs0ni
dê um pouco de altura, como altura: 1px como você disse, então começou a funcionar
Mohamed Hussain
1

Sempre que você estiver usando display:table;ou qualquer propriedade mais profunda como, display:table-cell;considere usar em heightvez de min-height. Como nas tabelas height = min-height considerando o recurso de auto-span nelas.

Ahmad Awais
fonte
1

Solução para Firefox

Adicione altura para desbloquear definindo a altura mínima

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

O número em altura pode ser qualquer outro valor real menor ou igual a altura mínima para fazê-lo funcionar conforme o esperado.

Mike Winchester
fonte