旧CSS问题的现代解决方案（第1部分）：将页脚放在页面底部

问候。我向您介绍了文章“底部保持页脚：Flexbox与 网格”，Stephanie Eckles于2020年4月8日发布

这是该系列的第一篇文章，介绍了解决CSS问题的现代方法，这是我作为前端开发人员已经13多年了。

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

, , . , , – .