让 Footer 保持在页面底部的2种现代布局方式

我们希望即使 Header+Body+Footer 总高度不足一屏，Footer 仍然会在页面的最底部。

<heder>
  <h1>Header</h1>
</heder>
<main>
  <p>Body</p>
</main>
<footer>
  <p>Footer</p>
</footer>

方式一：Flex 布局

因为即使整体高度不够满屏也要 Footer 在页面底部，所以首先要做的，是设定整个页面的最小高度为一屏幕高(这样 Footer 才有机会下沉)：

body {
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
/***把 footer 弄到底部，仅仅还需要一行设置：***/
footer {
  margin-top: auto;
}

在 Flex 布局中，margin: auto 会把元素往既定方向一直推，直到没有空间可推为止。而 margin-top: auto 就是把元素一直往下推，这样的效果就是，Footer 落到了页面的最底部。

方式二：Grid 布局

header、body、footer 对应着 3行，所以 grid 布局如下：

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

搞定！

最后要注意的是，两者的布局结果类似，但实际上有些许差异：在上面 flex 布局中，main 元素的高度是其实际内容高度，而在 grid 布局中， main 元素的高度包括所有剩余空间。