CSS-Anzeige: Tabelle min-Höhe funktioniert nicht

104

Weiß jemand, dass ich mit den neuesten Browsern minimale Arbeit leisten kann? Ich verwende CSS-Tabellen und es scheint die Mindesthöhe zu ignorieren.

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

Geige

css

— Samantha JT Star
quelle

1

ähnlicher Beitrag: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

Können Sie CSS-Tabellen definieren ? Hast du einen Aufschlag?

— Alex

1

Veröffentlichen Sie Ihr HTML, das entsprechende CSS und geben Sie, wenn möglich, einen Link zu Ihrer Site (oder versuchen Sie, ein jsfiddle.net zu erstellen ), um Ihr Problem aufzuzeigen .

— Oezi

Dies ist immer noch ein Problem mit FireFox, obwohl der Fehler seit vierzehn Jahren gemeldet wird. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

Bei der Verwendung von Tischen ist die Höhe im Wesentlichen die Mindesthöhe, da sich die Tische immer dehnen. Entfernen Sie einfach das "min-" und es wird funktionieren, wie Sie es erwarten.

— Swider
quelle

13

Dies ist völlig unintuitiv, aber genau richtig. Die besten Ergebnisse scheinen zu erzielen, wenn die innersten display: table-cellElemente mit der "festen" Höhe versehen werden.

— Eternicode

4

Ich habe nicht im IE getestet, aber es scheint, dass Firefox der einzige ist, der noch davon betroffen ist.

— Dex

2

Bestätigt, dass dies in Chrome 37, Safari 7 und FF 32 auf dem Mac heightfunktioniert und min-heightnicht. IE11 unter Win 8.1 zeigt in beiden Fällen das richtige Verhalten. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Nicht wahr. Wenn ich möchte, dass eine Tabelle mindestens 8 Zoll groß ist (ich verwende CSS für die Drucksteuerung) und es nicht genügend Zeilen gibt, um sie zu füllen, aber ich habe einen Fuß definiert, kann ich beim Definieren eine Abstandsreihe (die sich vertikal dehnen darf) bereitstellen Höhe auf meinen anderen Reihen, um sicherzustellen, dass dies nicht der Fall ist, und was ich bekomme, ist eine große Lücke, die meine Fußzeile dort hält, wo sie sein sollte. Funktioniert hervorragend in Chrome, aber nicht in FF oder dem von mir verwendeten PDF-Konverter. wkhtmltopdf. Ja, Höhe funktioniert, bedeutet aber semantisch nicht dasselbe wie Mindesthöhe.

— rainabba

7

Verwenden Sie height: 1px;auf dem Tisch oder einen beliebigen Wert. Grundsätzlich müssen Sie dem Tisch eine gewisse Höhe geben, damit er funktioniert min-height. Nur min-heightmit funktioniert nicht auf Tabellen auf Firefox.

— virajs0ni
quelle

4

OP fragt, wie es mit den neuesten Browsern funktioniert. Ich habe ihm nur eine Lösung gegeben. Wie ist es nicht genau?

— virajs0ni

Geben Sie eine Höhe wie Höhe: 1px wie Sie sagten, dann fing es an zu arbeiten

— Mohamed Hussain

1

Wann immer Sie verwenden display:table;oder eine tiefere Eigenschaft wie display:table-cell;die Verwendung heightanstelle von min-height. Wie in Tabellenhöhe = Mindesthöhe unter Berücksichtigung der darin enthaltenen Auto-Span-Funktion.

— Ahmad Awais
quelle

1

Lösung für Firefox

In Höhe zu entsperren Einstellung des min-height

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

Die Höhe kann ein beliebiger anderer realer Wert sein, der kleiner oder gleich der Mindesthöhe ist, damit er wie erwartet funktioniert.

— Mike Winchester
quelle