Solusi Modern untuk Masalah CSS Lama (Bagian 1): Menjaga Footer di Bagian Bawah Halaman

Salam pembuka. Saya mempersembahkan kepada Anda terjemahan dari artikel “Pertahankan Footer di Bawah: Flexbox vs. Grid ” , diterbitkan pada 8 April 2020 oleh Stephanie Eckles

Ini adalah artikel pertama dalam rangkaian yang memperkenalkan cara modern untuk memecahkan masalah CSS yang telah saya hadapi selama lebih dari 13 tahun sebagai pengembang front-end.

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

, , . , , – .