Wyświetlacz CSS: nie działa minimalna wysokość tabeli

104

Czy ktoś wie, że mogę pracować z minimalną wysokością w najnowszych przeglądarkach? Używam tabel CSS i wydaje się, że ignoruję min-height.

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

Skrzypce

css

— Samantha JT Star
źródło

1

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

— diEcho

1

Czy potrafisz zdefiniować tabele CSS ? Masz jakieś znaczniki?

— Alex

1

opublikuj swój html, zgodnie z css i, jeśli to możliwe, podaj link do swojej witryny (lub spróbuj zbudować jsfiddle.net ), aby pokazać swój problem.

— oezi

Nadal jest to problem z FireFox, chociaż błąd jest zgłaszany od czternastu lat. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

Podczas korzystania z tabel wysokość zasadniczo jest minimalną wysokością, ponieważ tabele zawsze się rozciągają. Po prostu pozbądź się „min-” i będzie działać zgodnie z oczekiwaniami.

— swider
źródło

13

Jest to całkowicie nieintuicyjne, ale trafione. Wydaje się, że najlepsze rezultaty daje ustawienie „stałej” wysokości na najbardziej wewnętrznych display: table-cellelementach.

— eternicode

4

Nie testowałem w IE, ale wydaje się, że Firefox jest jedynym, na który wciąż to wpływa.

— Dex

2

Potwierdzono, że heightdziała i min-heightnie działa w Chrome 37, Safari 7 i FF 32 na Macu. IE11 w Win 8.1 zapewnia poprawne zachowanie w obu. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Nie prawda. Jeśli chcę, aby tabela miała CO NAJMNIEJ 8 cali wysokości (używam css do kontroli drukowania) i brakuje w niej wystarczającej liczby wierszy, aby ją wypełnić, ale mam zdefiniowaną stopę tfoot, mogę podać wiersz odstępnika (może rozciągać się w pionie), podczas definiowania wysokość w moich innych rzędach, aby upewnić się, że nie, a to, co otrzymuję, to duża luka, która utrzymuje stopkę tam, gdzie powinna. Działa świetnie w Chrome, ale nie FF ani konwerter PDf, którego używam; wkhtmltopdf. Tak, wysokość działa, ale nie oznacza tego samego semantycznie co min-wysokość.

— rainabba

7

Użyj height: 1px;na stole lub dowolnej wartości. Zasadniczo musisz nadać stołowi pewną wysokość, aby działał min-height. Posiadanie tylko min-heightnie będzie działać na tabelach w przeglądarce Firefox.

— virajs0ni
źródło

4

OP pyta, jak sprawić, by działał z najnowszymi przeglądarkami. Dałem mu tylko rozwiązanie. Dlaczego to nie jest dokładne?

— virajs0ni

podaj wysokość, na przykład wysokość: 1px jak powiedziałeś, a potem zaczęło działać

— Mohamed Hussain

1

Za każdym razem, gdy używasz display:table;lub jakiejkolwiek głębszej właściwości, takiej jak display:table-cell;rozważ użycie heightzamiast min-height. Podobnie jak w tabelach wysokość = min-wysokość, biorąc pod uwagę funkcję automatycznego rozpiętości w nich.

— Ahmad Awais
źródło

1

Rozwiązanie dla przeglądarki Firefox

Dodaj wysokość, aby odblokować ustawienie minimalnej wysokości

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

Wysokość może być dowolną inną wartością rzeczywistą mniejszą lub równą minimalnej wysokości, aby działała zgodnie z oczekiwaniami.

— Mike Winchester
źródło