MrMurphy1: Flexbox-Höhe beinflussen

Beitrag lesen

Hallo

Dir unterlaufen wohl zwei Mißverständnisse.

Höhenangaben in Webseiten

Auf Webseiten sollten Höhenangaben so weit irgendmöglich vermieden werden. Grade Anfänger ignorieren diese bewährte Grundregel gerne.

Grundsätzlich sollten Webseiten nur rauf und runter scrollbar sein. Seitliches Srollen wird von den meisten Usern abgelehnt. Bei einem möglichen Scrollen in beide Richtungen gleichzeitig ist es sehr schwer den Überblick zu behalten.

Deshalb nutzen Webseiten die Breite von Browserfenstern so weit wie möglich aus und der Inhalt passt sich in der Höhe der Fensterbreite an. Je schmaler ein Fenster ist desto höher wird die Webseite. Das Verhalten erwarten die Besucher und damit kommen sie gut zurecht.

Darauf basieren auch die teilweisen Unterschiede bei den width- und height-Angaben im CSS.

Fast jeder Eingriff durch Angabe einer Höhe stört dieses Verhalten und führt zu Problemen.

Anfänger machen häufig den Fehler, Webseiten gestalten zu wollen, die keinen oder nur sehr wenig Inhalt enthalten. Damit ihre Webseiten "besser" aussehen sollen sie trotzdem die gesamte Fensterhöhe ihres Desktop-Bildschirms ausfüllen. Das führt dazu Höhenangaben mißbräuchlich einzusetzen. Die fertigen Seiten haben in der Regel so viel Inhalt dass sie auch bei großen Bildschirmen deren gesamte Höhe ausfüllen.

Mit Höhenangaben sollen also meistens Darstellungsprobleme behoben werden, die es überhaupt nicht gibt. So wohl auch bei dir.

Flexbox

Die Hauptaufgabe von Flexbox ist Leerraum zu verteilen. Das geht aber nur wenn überhaupt welcher vorhanden ist.

Wie bereits beschrieben ist (und so soll es auch sein) in der Regel kein Leerraum in der Höhe vorhanden. Deshalb kann Flexbox auch keinen Leerraum verteilen.

Flexbox ist aber überhaupt nicht dafür gedacht die grundsätzliche Größe von Elementen zu bestimmten. Die flex-Angaben ermöglichen nur den Flexitems möglichen Leerraum zuzuweisen.

Gruss

MrMurphy