DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft min-height in CSS wird verwendet, um die minimale Höhe eines bestimmten Elements festzulegen. Die Eigenschaft min-height überschreibt immer sowohl height als auch max-height. Autoren können alle Längenwerte verwenden, solange sie positiv sind.
.wrapper {
height: 100%; /* full height of the content box */
min-height: 20em; /* Will be AT LEAST 20em tall */
}
.wrapper {
height: 600px;
min-height: 400px; /* Will be AT LEAST 400px tall : overrides height */
}
.wrapper {
min-height: 400px; /* overrides height and max-height */
height: 200px;
max-height: 300px;
}Wenn einer der Werte größer ist (height > min-height oder umgekehrt), wird der größte Wert gerendert. Die Eigenschaft min-height gilt für alle Elemente außer nicht ersetzbare Inline-Elemente, Spalten und Spaltengruppen (d. h. colgroup, col ).
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | 59+ |
Ich denke, die Browser-Support-Tabelle ist ungenau... Zum Beispiel unterstützt Firefox 2+ min-height laut http://caniuse.com/#feat=minmaxwh
Hallo Chris,
Ich entwickle seit vielen Jahren Websites und betrachte Sie als eine angesehene Quelle für die Entwicklung, gut gemacht.
Nur eine kurze Notiz dazu, ich bin mir nicht sicher, wie „kompatibel“ diese Technik ist, da height die Höhe der Boxen festlegt, während min-height die sekundäre Eigenschaft ist.
Meines Wissens würde der Container „überlaufen“, wenn min-height größer als height ist, und dies könnte zu Inkonsistenzen zwischen den Browsern führen.
Fehlt mir etwas oder denke ich zu viel nach?
Ich freue mich auf Ihre Antwort,
Mr Alexander
Obwohl es fünf Jahre alt zu sein scheint, bin ich sehr froh und dankbar, diesen CSS-Trick gefunden zu haben, da er ein Problem löste und korrigierte, das ich mit einer meiner HTML-Webseiten hatte, bei der eine meiner Seiten beim Scrollen bis zum Ende einer meiner Seiten keinen Text anzeigte, wenn ich Firefox oder MS Edge verwendete, aber nicht in Google Chrome. Interessanterweise hatte ich ähnliche Probleme in der frühen Phase mit einer oder mehreren anderen HTML-Seiten, bei denen ich das Problem durch Versuch und Irrtum durch Ändern der Padding- und Margin-Werte in meinem externen CSS beheben konnte. Dies wurde jedoch schließlich zu einer echten Plage, da das Ändern der Werte für eine, aber nicht für beide Seiten funktionierte, und ich schließlich Inline-CSS auf der verbleibenden HTML-Seite verwenden musste, um das in externem CSS bereitgestellte zu überschreiben. Dann, wissen Sie was, begann eine weitere meiner Webseiten, ähnliche Probleme beim Anzeigen in FF und MS Edge zu zeigen. Ich fügte dann das Attribut min-height wie hier beschrieben zu einem Abschnitt in meinem externen CSS hinzu und siehe da, dies löste das Problem endgültig.
Großartiger Artikel,
Ich wollte nur nachfragen, ob Sie jemals ein Problem mit der Verwendung von „vh“ als min-height-Wert hatten. Ich hatte ein Attribut auf „min-height: 100vh“ gesetzt und es ignorierte das min-height-Attribut, aber wenn ich einen Pixelwert verwende, funktioniert es.
Ich habe schließlich display: flex verwendet und es schien funktioniert zu haben. Haben Sie damit Erfahrungen?
Luke
Hallo Sara,
in Ihrem ersten Codebeispiel haben Sie
.wrapper {height: 600px;
min-height: 400px; /* Wird MINDESTENS 20em hoch sein: überschreibt height */
}
Was ist der Vorteil davon, height und min-height in px anzugeben? Und warum sagt der Kommentar hinter min-height etwas über em?
Hallo David! Es gibt keinen zusätzlichen Vorteil, wenn die Werte in Pixeln angegeben werden – nur ein Beispiel in der Menge, um zu zeigen, dass verschiedene Längeneinheiten akzeptiert werden. Wenn das Design eine feste Höhe zwischen 400px und 600px vorsieht, dann wäre das ein guter Fall für deren Verwendung. Aber Sie werden wahrscheinlich relative oder prozentuale Einheiten wegen ihrer Flexibilität in responsiven Designs (unter anderem) sehen.
Und danke für den Hinweis auf diesen Tippfehler im Code-Kommentar!
min-heightfunktioniert für mich **NICHT**. Ich habe versuchtKönnte mir bitte jemand helfen?