Moderne Lösungen für alte CSS-Probleme (Teil 1): Halten Sie die Fußzeile am Ende der Seite

Schöne Grüße. Ich präsentiere Ihnen die Übersetzung des Artikels „Halten Sie die Fußzeile unten: Flexbox vs. Grid “ , veröffentlicht am 8. April 2020 von Stephanie Eckles

Dies ist der erste Artikel in einer Reihe, in dem moderne Methoden zur Lösung von CSS-Problemen vorgestellt werden, mit denen ich seit über 13 Jahren als Front-End-Entwickler konfrontiert bin.

Matthew James Taylor , . , , ( Flexbox).

SPA, , , , , , :

CSS: Flexbox Grid.

Flexbox. Codepen, $method grid, .

.

Flexbox

:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

/*  */
main {
  margin: 0 auto;
  /* : align-self: center */
  max-width: 80ch;
}

-, , min-height: 100vh, body , . , ( – ), , body .

flex-direction: column , .

Flexbox margin: auto. , , , ( ). , margin-top: auto .

Codepen main outline, , Flexbox, main . margin-top: auto.

, , Grid, main, .

Grid

:

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/**/
main {
  margin: 0 auto;
  max-width: 80ch;
}

min-height: 100vh, grid-template-rows .

Grid fr. fr " / " "" , . , "" Flexbox.

?

, Grid, , . , , . , , .

, Flexbox – , <article> <main>.

, , . , , – .