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

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