Breiten, Höhen und Overflow
Blockelemente (in HTML5: Elemente aus den Content-Modellen Heading, Sectioning, Grouping und teilweise Flow) nehmen per Default so viel Breite ein wie möglich, und so viel Höhe wie nötig. Mit Hilfe von CSS können Sie Breiten und Höhen erzwingen, sowohl zum Beschränken als auch zum Strecken. Dabei können allerdings Konfliktsituationen entstehen, die der Browser lösen muss. Etwa dann, wenn ein Inhalt eigentlich mehr Breite erfordert als angegeben, z.B. wegen einer enthaltenen Grafik, die mehr Breite benötigt. Dieses Konfliktverhalten können Sie ebenfalls beeinflussen. Insgesamt stehen CSS-Eigenschaften für Breite und Höhe (width und height), Mindestbreite und Mindesthöhe (min-width und min-height) sowie Maximalbreite und Maximalhöhe (max-width und max-height) zur Verfügung. Ferner gehört die overflow-Eigenschaft dazu, mit deren Hilfe sich regeln lässt, wie der Browser verfahren soll, wenn Inhalte definitiv zu groß sind für definierte Elementausmaße.
<h1 style="width:200px; border:10px solid silver; padding:3px; font-size:3em; overflow:hidden;"> Möglicherweise</h1> <h1 style="width:200px; border:10px solid silver; padding:3px; font-size:3em;"> Möglicherweise</h1> <div style="width: 50%; min-width: 300px; max-width: 800px; height: 200px; border:10px solid silver; padding:3px;"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
Die Eigenschaften width, height, min-width, min-height, max-width und max-height erwarten eine nummerische Angabe oder das Schlüsselwörter auto (der Browser soll die geeignete Breite ermitteln).
Im Beispiel ist zunächst zwei mal eine h1-Überschrift mit dem Inhalt Möglicherweise notiert. In beiden Fällen wird eine width-Angabe notiert, die nicht genügend Platz bietet, um das Wort Möglicherweise in der großen h1-Schrift darzustellen. Im Normalfall wird der Browser die width-Angabe insofern missachten, als er das Element auf die erforderliche Breite ausdehnt, so wie in der zweiten h1-Überschrift des Beispiels.
Die Eigenschaft overflow: hidden; verhindert dies und sorgt dafür, dass der überbreite Inhalt einfach abgeschnitten wird. Weitere mögliche Angaben für overflow sind visible (Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist), scroll (Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet; der Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster), sowie auto (der Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird — möglicherweise auch durch Anbieten von Scroll-Leisten).
Der untere Bereich im obigen Beispiel zeigt zum einen die Verwendung von height, um Elemente in der Höhe zu strecken, und ein typisches Zusammenspiel der Eigenschaften width, min-width und max-width. Die Breite wird relativ mit 50% angegeben. Einschränkend wird jedoch festgelegt, dass der Bereich mindestens 300 Pixel und maximal 800 Pixel breit sein darf. Das bedeutet: wenn die verfügbare Breite zwischen 600 und 1600 Pixeln liegt, wird der Bereich auf 50% davon ausgedehnt. Beträgt die verfügbare Breite dagegen nur 500 Pixel, bleibt der Anzeigebereich mindestens 300 Pixel breit und nimmt also mehr als 50% der verfügbaren Breite ein. Beträgt letztere mehr als 1600 Pixel, bleibt der Bereich 800 Pixel breit und nimmt also weniger als 50% ein.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.