Footer ohne Scrolling

[Rolf B]

Hallo Christian,

du musst es noch etwas erweitern.

• Du brauchst einen Flex-Container mit flex-direction:column. Soweit, so gut.
• Der Footer soll fixed sein. D.h. nicht wachsen, nicht schrumpfen, und optimalerweise so hoch sein wie es der Inhalt erfordert. -→ flex: 0 0 auto. Die erste 0 ist der Anteil an erforderlichen Höhenvergrößerungen (flex-grow), die zweite 0 der Anteil an Höhenverringerungen (flex-shrink), das auto die Basisgröße (flex-basis). Wenn Du "Luft" um den Text im Footer brauchst, füge Padding hinzu.
• Der Main-Teil soll den Rest der Seite ausfüllen. Er soll, wenn nötig wachsen. Vielleicht soll er auch, wenn das Fenster zu niedrig wird, schrumpfen. Wenn er schrumpft, sollte er einen Scrollbar bekommen. -→ flex: 1 1 auto; overflow:auto;;

Was passiert?

Der Browser berechnet die auf Grund des Inhaltes minimal erforderliche Höhe von <main> und <footer>. Danach schaut er (weil flex mit column-Richtung), wie hoch die Box ist, in die er Flex-Gruppe einsetzen muss. Ist sie höher, wird die Flex-Gruppe höher gemacht. Die notwendige Erhöhung wird gemäß der flex-grow Verhältnisse auf die Elemente der Flex-Gruppe verteilt. Da <main> ein flex-grow von 1 hat und der <footer> ein flex-grow von 0, bekommt <main> alle Höhenzuwächse zugeteilt.

Ist die Rahmen-Box niedriger als die Flex-Gruppe, passiert ähnliches, aber jetzt über flex-shrink. <footer> soll nicht geschrumpft werden, darum hat er ein flex-shrink von 0. Hat <main> ebenfalls ein flex-shrink von 0, kann die Flex-Gruppe nicht niedriger werden und der Body bekommt einen Scrollbar. <footer> wird dann nach unten geschoben. Hat <main> ein flex-shrink von 1, hängt das weitere Verhalten von seiner overflow-Eigenschaft ab. Der Default ist hier visible, d.h. die <main> Box ist mindestens so groß wie ihr Inhalt. Um sie verkleinern zu können, muss overflow auf auto, scroll oder hidden stehen.

Rolf