Visualizzazione CSS: altezza minima tabella non funzionante

104

Qualcuno sa che posso far funzionare l'altezza minima con i browser più recenti? Sto usando tabelle CSS e sembra ignorare min-height.

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

Violino

css

— Samantha JT Star
fonte

1

post simile: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

Puoi definire tabelle CSS ? Hai qualche markup?

— alex

1

pubblica il tuo html, il css corrispondente e, se possibile, dai un link al tuo sito (o prova a costruire un jsfiddle.net ) per mostrare il tuo problema.

— oezi

Questo è ancora un problema con FireFox, anche se il bug viene segnalato da quattordici anni. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

Quando si usano le tabelle, l'altezza è essenzialmente l'altezza minima, poiché le tabelle si allungano sempre. Basta sbarazzarsi del "min-" e funzionerà come previsto.

— Swider
fonte

13

Questo non è del tutto intuitivo, ma azzeccato. I migliori risultati sembrano arrivare mettendo l'altezza "fissa" sugli display: table-cellelementi più interni.

— eternicode

4

Non ho provato in IE ma sembra che Firefox sia l'unico ancora interessato da questo.

— Dex

2

Confermato che heightfunziona e min-heightnon funziona in Chrome 37, Safari 7 e FF 32 su mac. IE11 su Win 8.1 fornisce il comportamento corretto in entrambi. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Non vero. Se voglio che una tabella sia ALMENO 8 pollici di altezza (uso CSS per il controllo della stampa) e manca di righe sufficienti per riempirla, ma ho un tfoot definito, posso fornire una riga spaziatore (consentita di allungarsi verticalmente), mentre definisco altezza sulle altre mie righe per assicurarmi che non lo facciano e quello che ottengo è un grande spazio che mantiene il mio piè di pagina dove dovrebbe essere. Funziona alla grande in Chrome, ma non FF o il convertitore PDf che sto usando; wkhtmltopdf. Sì, l'altezza funziona, ma non significa semanticamente la stessa cosa di min-height.

— Rainabba

7

Utilizzare height: 1px;sul tavolo o qualsiasi valore. Fondamentalmente devi dare al tavolo una certa altezza per farlo funzionare min-height. Avere solo min-heightnon funzionerà sulle tabelle su Firefox.

— virajs0ni
fonte

4

OP chiede come farlo funzionare con i browser più recenti. Gli ho appena dato una soluzione. Come non è accurato?

— virajs0ni

dai un po 'di altezza come l'altezza: 1px come hai detto, poi ha iniziato a funzionare

— Mohamed Hussain

1

Ogni volta che si utilizza display:table;o qualsiasi proprietà più profonda come display:table-cell;considerare l'utilizzo heightinvece di min-height. Come nelle tabelle height = min-height considerando la funzione di auto-span in esse.

— Ahmad Awais
fonte

1

Soluzione per Firefox

Aggiungi altezza per sbloccare l'impostazione dell'altezza minima

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

Il numero in altezza può essere qualsiasi altro valore reale inferiore o uguale a min-height per farlo funzionare come previsto.

— Mike Winchester
fonte