CSS：父元素设置min-height:100vh时子元素height:100%未生效问题咨询

问题原因 #

这是CSS标准中百分比高度的计算规则导致的：

• 元素设置height: 100%时，百分比值是基于它的直接父元素显式声明的height属性值计算的
• 你仅给外层div设置了min-height: 100vh，没有显式定义height属性，此时外层div的height实际计算值为auto
• 当父元素的height为auto时，子元素的百分比高度没有可参考的计算基准，因此不会生效，子元素高度最终由自身内容高度决定

常用解决方案 #

• 方案一：给外层div同时显式声明height: 100vh，如果需要兼容内容超过视口高度的场景，可以保留min-height: 100vh，外层样式修改为：

  div {
    height: 100vh;
    min-height: 100vh;
  }
  

• 方案二：使用Flex布局实现，外层div设置display: flex; flex-direction: column; min-height: 100vh，内层div去掉height: 100%改为设置flex: 1，即可自动撑满父容器剩余高度
• 方案三：使用Grid布局实现，外层div仅需设置display: grid; min-height: 100vh，内层div默认就会撑满整个父容器高度

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