Vertikale Ausrichtung in grid

[Rolf B]

Hallo Nickily,

ja, ein Link auf die Seite wäre schon hilfreich.

Meine Hypothese:

Damit der Footer unten steht, muss das Grid so hoch - oder mindestens so hoch - wie das Fenster sein. Ein height oder min-height von 100vh auf dem Body könnte Wunder wirken, allerdings musst Du noch ein bisschen nachhelfen, sonst bekommst Du einen Scrollbar.

Der Body hat nämlich einen kleinen Margin, und der macht die Seite bei height:100vh höher als 100% der Viewport-Höhe. Also - entweder den Margin auf 0 setzen, oder die Höhe des Body entsprechend reduzieren:

body {
   margin: 8px;
   min-height: calc(100vh - 16px);
   box-sizing: border-box;
}

box-sizing brauchst Du nur, wenn der Body border oder padding hat.

Es kann dann immer noch schief gehen, wenn im Body vorneweg ein Element steht, dass ein margin-top von mehr als 8px hat. Ein <h1> zum Beispiel. Per Default würde dieser Margin über den Body hinausragen und dessen margin-top vergrößern.

Wenn dein Body das grid ist, ist es KEIN Problem, weil Grid-Kinder automatisch einen eigenen Block-Formatting-Context bekommen, der Margins einsperrt.

Andernfalls sollte der Body noch overflow:hidden bekommen, damit wird ebenfalls ein Block Formatting Context erzeugt. Collapsing margins und block formatting context sind eine Wissenschaft für sich...

Rolf