CSS-Eigenschaft: max-height, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3)
Maximalhöhe
Legt die maximale Höhe eines Block-Elements fest.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Maximalhöhe |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3):
- box-sizing
- clear
- display
- float
- height
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- Aktuelle Seite: max-height
- max-width
- min-height
- min-width
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- rotation
- rotation-point
- vertical-align
- visibility
- width
Folgendes ist beim Einsatz von max-height zu beachten:
- max-height definiert die maximale Höhe eines Block-Elements. Ist weniger Inhalt vorhanden, wird nur der benötigte Platz eingenommen. Erst wenn der Inhalt die konfigurierte Maximalhöhe überschreitet, greift die Eigenschaft max-height.
- Ist die maximale Höhe erreicht, überlappt der Inhalt ohne zusätzliche CSS-Angaben das HTML-Element.
- max-height ist sinnvoll mit der CSS-Eigenschaft overflow kombinierbar. Wird der Wert auf auto oder scroll gesetzt, wird an der Box ein Scrollbalken erzeugt. Bei overflow: auto erst dann, wenn dieser bei zu viel Inhalt notwendig wird. Bei overflow: scroll immer, auch wenn der zur Verfügung stehende Platz noch nicht ausgenutzt ist.
- Scrollbalken sollten nur gemäßigt eingesetzt werden. Zu viele davon stören schnell das Layout, vor allem leidet die Bedienbarkeit einer Seite darunter. Ein sinnvolles Praxisbeispiel für einen gezielt eingesetzten Scrollbalken sieht man auf dieser Seite hier rechts oben, der Kasten mit den "Verwandten Eigenschaften". Ohne den Scrollbalken würde er das Layout in der derzeitigen Umsetzung sprengen. Um nur einen vertikalen Scrollbalken zu erzeugen, ist dort die Eigenschaft overflow-y: auto; eingesetzt.
- Der Internet Explorer 6 unterstützt max-height nicht, mehr Inhalt dehnt eine umgebende Box auf die benötige Höhe aus. height verhält sich im IE6 beim Erreichen der definierten Höhe wie max-height.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu max-height:
- W3C Spezifikation:
http://www.w3.org/TR/css3-box/#max-height
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
marquee-style - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
max-width
Beispiele
HTML:
<div>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</div>CSS:
div {
max-height: 250px;
border: 1px solid black;
}
/* Ist weniger Inhalt als die maximale Höhe vorhanden, verhält sich die Box normal, es wird automatisch der benötigte Platz eingenommen. */Beispiel Nr. 1 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div>Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</div>CSS:
/* In diesem Beispiel greif die max-height aus Beispiel Nr. 1. Ist die maximale Höhe erreicht, lappt Inhalt über den definierten Bereich hinaus. */Beispiel Nr. 2 So sieht's aus:
Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.
HTML:
<div class="doOverflow">Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</div>CSS:
div.doOverflow {
overflow: auto;
}
/* Mit einem overflow: auto wird bei Bedarf ein Scrollblaken erzeugt. Da hier nur die max-heigt definiert ist, kommt es nur zu einem vertikalen Scrollbalken. */Beispiel Nr. 3 So sieht's aus:
Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.
HTML:
<div class="doOverflow">Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. </div>CSS:
/* Hier greift das overflow: auto aus Beispiel Nr. 3. Die maximale Höhe ist nicht erreicht, es entsteht kein Scrollbalken. */Beispiel Nr. 4 So sieht's aus:
Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus.
HTML:
<div class="doOverflowScroll">Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. </div>CSS:
div.doOverflowScroll {
overflow: scroll;
}
/* Ist der Wert für overflow auf scroll gesetzt, wird immer und in beiden Ebenen ein Scrollbalken generiert, selbst wenn der nicht notwendig ist. */Beispiel Nr. 5 So sieht's aus:
Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus.
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!