Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung -> Breite-Höhe

CSS-Grundlagen: Angabe von Breite und Höhe

CSS-Extreme: maximale breit, minimal breit

Neben der Positionsart und der Möglichkeit, Elemente mit Abständen nach allen Richtungen zu versehen, gibt es eine weitere Möglichkeit, Elemente zu positionieren. Dabei geht es aber weniger um die Position selbst, sondern um die Darstellung des Elementes.

Konkret kann man mit der Breite und Höhe absolute Werte festlegen. Beispiele dazu:

width: 300px;
min-width: 80%;
max-width: 400px;

height: 250px;
min-height: 150px; max-height: 550px;

 

In der ersten Zeile wird der Breite eines Elementes eine fixe Dimension von 300 Pixel zugewiesen. Ob die dreihundert Pixel gebraucht werden oder nicht, spielt keine Rolle. In der zweiten Zeile wird der Breite eine Mindestpreise von 80 Prozent zugewiesen. Das bedeutet, dass von dem vorhandenen Platz 80% für das Element verbraucht werden. Das macht Sinn, wenn man auf verschiedene Bildschirmauflösungen Rücksicht nehmen möchte.

Die dritte Zeile begrenzt das Element mit einer Breite von 400 Pixel. Auch wenn 800 Pixel Platz wäre, es werden nur 400 Pixel benützt.

Die Höhe kann, wie in dem vierten Beispiel zu sehen, auch fix definiert werden. Im letzten Beispiel wurden zwei Vorgaben eingetragen. Die Höhe soll mindestens 150 Pixel betragen und maximal 550 Pixel.

Zu beachten ist: bei der Breite funktionieren Prozentwerte, bei der Höhe nicht. Schon oft ist man an Versuchen gescheitert, eine Navigationsspalte mit "height: 100%;" genauso hoch zu bekommen wie den Rest der Seite, weil die Navigation einen farblichen Hintergrund bekam und dieser weitergeführt werden sollte, obwohl die Navigation schon beendet war. Doch das klappt nicht. Die Browser stellen die Navigation dar, ignorieren die 100% aber. Nur mit Tricks kann man diesen Fall lösen - indem man nämlich eine Hintergrundgrafik einbaut.

Übersicht der Unterseiten

Beispiel: Breite/Höhe

Informationen über ein praktisches CSS-Beispiel für die Verwendung von Breite und Höhe.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Positionierung

Startseite CSS-Grundlagen