使用 CSS height 属性和百分比值
CSS height 属性与百分比值一起使用时，是根据元素的包含块计算的。
假设您的body 元素具有height: 1000px。那么height: 90% 的孩子将获得 900 像素。
如果您没有为包含块设置显式高度（并且子元素不是绝对定位的），那么具有百分比高度的子元素将无事可做，高度将由内容和其他属性确定。
来自规范：
10.5 Content height: the height property
百分比
指定百分比高度。百分比是根据生成框的高度计算的
包含块。如果包含块的高度不是
明确指定并且此元素不是绝对定位的，该值计算为“自动”。
auto
高度取决于其他属性的值。
因此，如果您想在 div 中使用百分比高度，请指定所有父元素的高度，包括根元素（例如，html, body {height:100%;}）
请注意，min-height 和 max-height 是不可接受的。它必须是height 属性。
这里有一个小总结：
John：我想将 div 的高度设置为 100%。
简：100% 什么？
约翰：100% 的容器。所以，父级上一级。
简：好的。 div 的父级的高度是多少？
约翰：没有。汽车，我猜。内容驱动。
简：那么，您希望 div 具有未知变量的 100% 高度吗？
约翰：[沉默]
简：嘿，约翰，我可以要 50% 吗？
约翰：50% 什么？
简：没错！
简：百分比是相对值。你总是要问“什么的百分比？”。通过为每个父级声明一个明确的高度，一直到body 和html，您可以为每个子级建立一个具有百分比高度的参考框架，从而使高度起作用。
示例
假设您希望 div 的高度是其父级的 50%。
这行不通：
<article>
<section>
<div style="height:50%"></div>
</section>
</article>
这也不会：
<article>
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
这也不会：
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
这也会失败：
<body style="height:100%">
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
</body>
现在，它终于可以工作了：
<html style="height:100%">
<body style="height:100%">
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
</body>
</html>
这也可以：
<article>
<section style="height: 500px">
<div style="height:50%"></div>
</section>
</article>
但不是这个：
<article>
<section style="min-height: 500px">
<div style="height:50%"></div>
</section>
</article>
sample code
使用100vh
如您所见，百分比高度有点棘手。您可以通过简单地使用视口百分比高度来避免复杂性（即，永远不必考虑父元素）。每当您想要一个框作为视口的高度时，请使用height: 100vh 而不是height: 100%。不需要其他任何东西。
绝对定位异常
如the spec 中所述，绝对定位元素是百分比高度规则的一个例外。更多细节在这里：Applying 100% height to nested, non-flex elements。