Modern Solutions to Old CSS Problems (Part 1): Keeping the Footer at the Bottom of the Page

Greetings. I present to your attention the translation of the article “Keep the Footer at the Bottom: Flexbox vs. Grid ” published on April 8, 2020 by Stephanie Eckles

This is the first article in a series that introduces modern ways of solving CSS problems that I have faced for over 13 years as a front-end developer.

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>.

, , . , , – .