Warum Funktionieren die Befehle nicht?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das Markup sollte dann so aussehen: …

Und gestylt könnte es so aussehen.

Wichtig: Die Angabe einer Hintergrundfarbe. Ansonsten siehst du, wenn das Hintergrundbild aus irgendeinem Grund nicht geladen wird, die ostfriesische Nationalflagge: weißer Adler auf weißem Grund.

body ist eine Flexbox, deren Kinder header, p und footer sich untereinander anordnen und die volle Höhe des Viewports (oder bei Bedarf mehr) ausfüllen.

Der Footer kommt nach unten durch header { margin-top: auto } p { margin-bottom: auto }.

Hinweis: Die präsentationsbezogene Klasse "btn" hab ich gar nicht benutzt; die kann auch weg.

LLAP 🖖