CSS布局疑问：为何红色div未取剩余高度，而是用100vh的100%？

我把body的高度设为100vh，内部依次放了三个div：高度10px的黑色div、高度设为100%的红色div、高度40px的蓝色div。但红色div的高度是100vh的100%，而不是100vh减去10px和40px后的剩余空间，这是为什么？

相关代码如下：

CSS代码：

.black {
  height: 10px;
  background-color: black;
}

.red {
  height: 100%;
  background-color: red;
}

.blue {
  height: 40px;
  background-color: blue;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

HTML代码：

<body>
      <div class="black"></div>
      <div class="red"></div>
      <div class="blue"></div>
  </body>

这是因为CSS中百分比高度是基于父元素的已设定高度计算的，而不是父元素的剩余可用空间。

你的body明确设置了height:100vh，所以子元素red的height:100%会直接继承body的完整高度（也就是100vh），完全不会考虑其他子元素（black和blue）已经占用的空间。这就导致三个div的总高度是10px + 100vh + 40px，超出了body的高度范围。

如果想让红色div占满body的剩余可用高度，推荐用以下两种方案：

方案1：使用Flexbox #

给body设置flex布局，让子元素按垂直方向排列，然后给红色div设置flex:1，它就会自动填充剩余空间：

.black {
  height: 10px;
  background-color: black;
}

.red {
  flex: 1; /* 填充剩余空间 */
  background-color: red;
}

.blue {
  height: 40px;
  background-color: blue;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex; /* 开启flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
}

方案2：使用Grid #

给body设置grid布局，直接分配每行的高度比例，1fr会自动占据剩余空间：

.black {
  background-color: black;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid; /* 开启grid布局 */
  grid-template-rows: 10px 1fr 40px; /* 直接定义每行高度 */
}

这两种方案都能让红色div准确占据body减去黑色和蓝色div后的剩余高度，而且不需要依赖百分比计算，更灵活可靠。

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