Footer ohne Scrolling

[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 🖖