古いCSSの問題に対する最新の解決策（パート1）：フッターをページの下部に保持する

こんにちは。記事「KeeptheFooter at the Bottom：Flexbox vs. 2020年4月8日にStephanieEcklesによって公開された「グリッド」

これは、フロントエンド開発者として13年以上にわたって直面してきたCSSの問題を解決する最新の方法を紹介するシリーズの最初の記事です。

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

, , . , , – .