React中root div使用CSS Grid实现整页布局高度不生效如何解决？

问题原因 #

• 百分比高度依赖父元素高度定义：你仅为#root设置height:100%，但它的上层元素html、body都没有设置高度规则，此时height:100%不会生效，#root高度还是跟随内容计算。
• Grid容器未占满父容器高度：你的Grid容器main没有设置高度规则，就算#root高度正常，main也只会适配自身内容高度，不会占满可用空间。
• Grid行高配置错误：grid-template-rows中使用的auto是按内容高度自适应，不会主动填充Grid容器的剩余空间。

修正方案 #

1. 给所有根级元素设置占满视口的高度规则，使用min-height可以避免内容超出视口高度时被截断
2. 给Grid容器main设置高度占满父容器，同时把行高的auto替换为1fr，1fr是Grid布局的专用单位，会自动分配容器的剩余可用空间

完整修正后的CSS代码 #

html, body, #root {
  margin: 0;
  min-height: 100vh;
}

main{
  min-height: 100%;
  display: grid;
  grid-template-areas: 
    "header"
    "content"
    "footer";
  grid-template-rows: 50px 1fr 70px;
}

Header{
  grid-area:header;
  border:1px solid black;
}

Footer{
  grid-area:footer;
  border:1px solid black;
}

#contentMain{
  grid-area:content;
  border:1px solid black;
}

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