如何让main标签高度占满body父元素剩余高度？（CSS/HTML）

问题 #

我的HTML结构如下：

<html>
  <body>
    <header>...</header>
    <main>...</main>
  </body>
</html>

header没设固定高度，由内容撑开大概10vh。我想让body高度为100vh，main填满body剩下的空间（到屏幕底部，不用滚动就能看到main底部），同时让main里的一句话在自己的区域居中。但直接给main设100%高度的话，它会变成100vh，跟header叠在一起超出屏幕，得滚动才能看全，而且文本也没居中。

解决方法 #

方法1：Flexbox布局（推荐） #

给body设置垂直方向的flex布局，高度设为100vh，先清除默认的margin避免不必要的滚动。然后给main加flex:1，它就会自动占满header剩下的空间，再用flex让内部内容居中：

html, body {
  height: 100vh;
  margin: 0; /* 清除浏览器默认边距 */
}

body {
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

main {
  flex: 1; /* 占据body剩余的全部空间 */
  display: flex;
  justify-content: center; /* 水平居中内容 */
  align-items: center; /* 垂直居中内容 */
}

方法2：Grid布局 #

用Grid也能快速实现，给body设置网格布局，行高设为auto 1fr，第一行自适应header的高度，第二行让main占满剩余空间，再用place-items:center让内容居中：

html, body {
  height: 100vh;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行随内容变化，第二行占剩余空间 */
}

main {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}

为什么之前的方法失效？ #

之前给main设100%高度，是相对于父元素body的100vh高度，但body里还有header的高度，所以main的100vh加上header的高度就超过了屏幕高度，自然会出现滚动条。而Flex的flex:1或者Grid的1fr会自动计算父元素的剩余空间，不会出现超出的情况。

内容的提问来源于stack exchange，提问作者Page COW