Footer ohne Scrolling

[Christian Huml]

Guten Tag zusammen,

wie bekomme ich es hin Codepen dass der Footer nur die Höhe ausfüllt (ohne Scrolling).

Ist dieses Beispiel veraltet? Beispiellayout: 100% Höhe mit Footer.

Mit freundlichen Grüßen

Christian Huml

[beatovich]

hallo

Guten Tag zusammen,

wie bekomme ich es hin Codepen dass der Footer nur die Höhe ausfüllt (ohne Scrolling).

   body{ display:flex; flex-direction:column; }
   footer{flex: 1 1 auto;}

[Christian Huml]

@beatovich

Hatte ich auch schon versucht, scheint nicht zu greifen. Codepen

Hängt dies eventuell mit Grid zusammen?

Mit freundlichen Grüßen

Christian Huml

[beatovich]

hallo

@beatovich

Hatte ich auch schon versucht, scheint nicht zu greifen. Codepen

klar, weil du die angabe:

html, body {height:100%}

entfernt hast!

[Christian Huml]

klar, weil du die angabe:

html, body {height:100%}

entfernt hast!

@beatovich

Stimmt da habe ich wieder nicht mitgedacht 😂

Mit freundlichen Grüßen

Christian Huml

[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

[Rolf B]

Hallo Ingrid,

da hatte ich nicht genau gelesen; der Footer soll ja den Teil unter Main ausfüllen, und main nicht wachsen.

Dafür muss main ein flex: 0 1 auto; overflow:auto; bekommen (damit es nicht wächst, aber bei Bedarf schrumpft und einen Scrollbar bekommt) und der footer ein flex: 1 0 auto (damit er wächst, aber nicht schrumpft).

Jedenfalls geht beides: Fixer Footer und dynamisches Main, oder Footer mit Minimalhöhe, der den Raum unter Main ausfüllt.

Rolf

[Christian Huml]

@Rolf B

Wäre diese Vorgehensweise so richtig gedacht oder habe ich wieder zu kompliziert gedacht? Codepen

PS: Text von Footer sieht man normalerweise nur unten 😉

Mit freundlichen Grüßen

Christian Huml

[Gunnar Bittersmann]

@@Christian Huml

Wäre diese Vorgehensweise so richtig gedacht oder habe ich wieder zu kompliziert gedacht? Codepen

Letzteres.

main soll ganz oben sein; footer ganz unten? Dann: justify-content: space-between für die Flexbox, d.h. für den body.

html muss keine Flexbox sein; also nicht html, body { display: flex },
sondern aufteilen: html, body { height: 100% }, den Rest nur für body.

Oder die Höhe nicht in Prozent angeben, sondern body { height: 100vh }. Dann braucht html keine Höhenangabe.

Damit der Hintergrund auch zwischen main und footer grün ist („Hach, ist der Rasen schön grün!“), diesen nicht für footer angeben, sondern für html oder body.

Für footer bleibt nur footer { text-align: center } übrig.
Das <div class="copyright">-Element kann ganz weg.

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Somit wäre ja der Text "Copyright Test" wieder ganz oben Codepen.

In meinem alten Beispiel habe ich ihn aber absichtlich nach unten gesetzt.

Mit freundlichen Grüßen

Christian Huml

[Gunnar Bittersmann]

@@Christian Huml

Somit wäre ja der Text "Copyright Test" wieder ganz oben Codepen.

Klar, wenn du für body keine Höhe angibst.

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Ja, habe ich vergessen da ich normal html, body schreibe 😂

Warum sollte man html und body trennen kommt doch zum gleichen Ergebnis?

html, body
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color:green;

Mit freundlichen Grüßen

Christian Huml

[Christian Huml]

@Gunnar Bittersmann

Auch wenn ich jetzt html und body nutze, gilt ja die Farbe background-color global, was ist aber jetzt wenn ich dieses Beispiel auf <header </header> erweitere und ich aber nicht die gleiche Farbe haben will?

Mit freundlichen Grüßen

Christian Huml

[Gunnar Bittersmann]

@@Christian Huml

Auch wenn ich jetzt html und body nutze, gilt ja die Farbe background-color global,

Was meinst du mit „global“? Hintergründe werden nicht vererbt.

Wenn du html oder body Hintergrund gibst, füllt dieser den Viewport aus.

was ist aber jetzt wenn ich dieses Beispiel auf <header </header> erweitere und ich aber nicht die gleiche Farbe haben will?

Dann gibst du eben header einen anderen Hintergrund – wie du es auch für main getan hast.

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Huml

Ja, habe ich vergessen da ich normal html, body schreibe 😂

Wie gesagt, wenn du 100vh verwendest, musst du die Höhe nur für body angeben.

Warum sollte man html und body trennen

Weil html keine Flexbox sein muss. Ich würde für ein Element so wenig wie möglich Stile angeben, also keine überflüssigen. Das dürfte der Wartbarkeit des Codes zugutekommen.

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Ja, habe ich vergessen da ich normal html, body schreibe 😂

Wie gesagt, wenn du 100vh verwendest, musst du die Höhe nur für body angeben.

Nur zum Verständnis 100vh entspricht 100% der Höhe, anderes Beispiel 25vh entspricht 25% der Höhe. Dies gleiche würde sich auch bei vw darstellen. Ist dies korrekt?

Warum sollte man html und body trennen

Weil html keine Flexbox sein muss. Ich würde für ein Element so wenig wie möglich Stile angeben, also keine überflüssigen. Das dürfte der Wartbarkeit des Codes zugutekommen.

Ok, macht Sinn. Werde ich dann ab sofort ändern. 😀

Mit freundlichen Grüßen

Christian Huml

[Gunnar Bittersmann]

@@Christian Huml

Nur zum Verständnis 100vh entspricht 100% der Höhe

der Höhe des Viewports – im Gegensatz zu 100%, was sich auf alles Mögliche bezieht.

Dies gleiche würde sich auch bei vw darstellen.

Das Gleiche in der Breite.

LLAP 🖖

[Christian Huml]

Hallo @Gunnar Bittersmann,

vielen Dank für deine Rückmeldung. Benötige ich dann überhaupt flexbox?

body
{
   height:100vh;
   background-color:red;
}

PS: Nur Beispielweise.

Mit freundlichen Grüßen

Christian Huml

[Christian Huml]

@Gunnar Bittersmann

Frage hat sich von selber geklärt 😀

Mit freundlichen Grüßen

Christian Huml