为何id为root的div无法占满父元素body的100%高度？

问题代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        min-height: 98vh;
        color: white;
        background-color: black;
        border: 1px solid green;
      }
      #root {
        min-height: 100%;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="root">Testing.</div>
  </body>
</html>

问题根源 #

CSS中百分比高度的计算依赖父元素的明确高度值（即height属性定义的固定值或可计算的百分比值）。你给父元素body设置的是min-height:98vh，这个属性仅定义了高度的下限，并没有给body一个确定的计算高度，因此子元素#root的min-height:100%无法基于不确定的父元素高度完成计算，自然无法占满body的高度。

解决办法 #

方法一：使用Flex布局（推荐）

给父元素body添加display:flex，利用Flex布局特性让子元素自动填充父元素可用空间：

body {
  min-height: 98vh;
  color: white;
  background-color: black;
  border: 1px solid green;
  display: flex;
}
#root {
  flex: 1; /* 让子元素占满父元素剩余空间 */
  border: 1px solid red;
}

方法二：给父元素补充明确的height属性

给body同时设置height:100%，让父元素拥有可计算的确定高度，子元素的百分比高度即可正常生效：

body {
  min-height: 98vh;
  height: 100%;
  color: white;
  background-color: black;
  border: 1px solid green;
}
#root {
  min-height: 100%;
  border: 1px solid red;
}

注：若body内内容超过98vh，body会被自动撑开，子元素高度也会随之扩展。

方法三：直接使用视口单位

如果父元素高度固定为98vh，可直接给子元素设置相同视口单位高度，无需依赖百分比：

#root {
  min-height: 98vh;
  border: 1px solid red;
}

注：此方式局限性在于，若父元素高度后续变化，子元素高度无法自动同步。

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