HTML中百分比height不生效？如何实现父容器占比高度的色块？

当给元素设置百分比高度（如height:75%）时，浏览器需要从父元素获取明确的高度值作为参照才能计算当前元素高度。如果父元素（比如默认状态的html、body）高度为auto，百分比高度就无法生效，元素只会被内容撑开高度。

以下是几种可行的解决方案：

方案1：给根元素设置100%高度（适配全屏场景） #

如果要让色块占整个浏览器视口的百分比高度，先给html和body设置height:100%，让它们撑满视口，子元素的百分比高度就能基于视口高度计算：

<html>
<style>
html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}
.worksOK {
  background-color: cyan;
}
.nowWorks {
  background-color: lightblue;
}
</style>
<body>
<h1>Height % now works</h1>
<div class="worksOK" style="height:75px;">
  A fixed height, like <b>height:50px;</b> works fine
</div>
<div class="nowWorks" style="height:75%;">
  Now height in percentage, like <b>height:75%;</b> works correctly.
</div>
</body>
</html>

方案2：使用视口单位vh（更简洁的全屏方案） #

现代浏览器支持视口单位vh，1vh等于视口高度的1%，无需依赖父元素高度，直接设置即可：

<html>
<style>
.worksOK {
  background-color: cyan;
}
.fixedPercentage {
  background-color: lightblue;
}
</style>
<body>
<h1>Using vh units works directly</h1>
<div class="worksOK" style="height:75px;">
  A fixed height, like <b>height:50px;</b> works fine
</div>
<div class="fixedPercentage" style="height:33vh;">
  Using <b>height:33vh;</b> directly sets height to 33% of viewport height.
</div>
</body>
</html>

方案3：针对自定义父容器设置高度 #

如果色块嵌套在某个自定义父容器内，只需给该父容器设置明确高度（固定值或百分比均可），子元素的百分比高度就会基于父容器计算：

<html>
<style>
.parent-box {
  height: 400px; /* 父容器固定高度 */
  border: 1px solid #ccc;
}
.colored-block {
  background-color: lightblue;
  height: 33%; /* 占父容器高度的33% */
}
</style>
<body>
<div class="parent-box">
  <div class="colored-block">
    占父容器33%高度的色块
  </div>
</div>
</body>
</html>

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