Flexbox-Höhe beinflussen

[delbor]

Hi MrMurphy

Dir unterlaufen wohl zwei Mißverständnisse.

Wohl nicht nur zwei - aber das wird sich mit der Zeit geben.

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

Ich hab dieses Tutorial nachgebaut und anschliessend ein bisschen damit herumgespielt, um mir gewisse Sachen zu verdeutlichen. Das Tut verwendet keinerlei Höhenangaben und ich also auch nicht. Trotzdem snd die Boxen genau so gross, wie sie sein sollen.

Das bringt mich erstmal auf den Gedanken, dass sich Boxen in ihrer Höhe an ihren Inhalt anpassen - was so auch irgendwo steht, wenn mich nicht alles täuscht. Wieso tut dies aber mein Header nicht?

Während ich dies schreibe, kommt mir eine Idee: das Logo ist in einem div "#Titelbox2" definiert, und da sind with und margin in Prozent angegeben - in dem direkt übergeordneten Container (der Flexbox) jedoch nicht. Also holt sich der Browser die Bezugsgrösse woanders... Aber das müsste ich erst austesten.

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.

Ich bin bis jetzt einmal einer Webseiten begegnet, die horizontal gescrollt werden musste - das ist schlicht fürchterlich...

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.

Auf der Einstiegsseite befindet sich im mittigen article-Element die nach Rubriken aufgeteilte Navigation. Die nimmt in der Tat sehr wenig Platz ein. Die beiden Aside-Boxenlinks und rechts sind für iregendwelche Banner vorgesehen - nicht wirklich viele, um die Seite nicht zu überladen und den eigentlichen Inhalt nicht zu ersticken.

Ich hab auch das Tutorial zum feststehenden Footer nachgebaut - mit dem Resultat, dass der "feststehende Footer" unmittelbar unter der article- und den Asideboxen klebte. Dies hab ich behoben, indem ich in der article-Box mehrere Absätze <p>S</p> untereinander einfügte. Der Footer war zwar immer noch nicht feststehend, aber die Höhe ausreichend, dass die Seite vertikal geschrollt werden musste, um ihn sichtbar zu machen.

Mir ist einfach wichtig, dass die Seite den kompletten Viewport nutzt, auch wenn nicht genügend Inhalt da ist, um ihn zu füllen.

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.

Mmmhhh. In meinen beiden Versionen sind der Body und das darin enthaltene Main beides Flexboxen, sollten ihre Inhalte und die entstehenden Leerräume also optimal verteilen (was dazu führt, dass mein Header viel zu hoch ist, bzw. sich nach oben verkleinert, wenn ich ihm explizit Höhe zuweise).

Gruss

Delbor