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



, , . , , – .




All Articles