使用 CSSheight属性和百分比值
The CSS height属性与百分比值一起使用时，是相对于元素的包含块进行计算的。
比方说你的body元素有height: 1000px。然后一个孩子与height: 90%会得到 900px。
如果您没有为包含块设置明确的高度（并且子元素不是绝对定位的），那么具有百分比高度的子元素将没有任何意义，高度将由内容和其他属性决定。
从规格来看：
10.5 内容高度：height财产
百分比
指定百分比高度。百分比是根据生成的框的高度计算的
包含块。如果包含块的高度不是
明确指定并且该元素不是绝对定位的，该值计算为“auto”。
auto
高度取决于其他属性的值。
因此，如果您想在 div 中使用百分比高度，请指定所有父元素的高度，直到并包括根元素（例如，html, body {height:100%;})
注意min-height and max-height是不可接受的。一定是height财产。
这里有一个小总结：
John: 我想将 div 的高度设置为 100%.
简：100% 什么？
约翰：100% 的容器。所以，父级上升了一级。
简：好的。 div 的父级的高度是多少？
约翰：没有一个。我猜是汽车。内容驱动。
简：那么，您希望 div 具有 100% 未知变量的高度吗？
约翰：[安静]
简：嘿约翰，我可以拿 50% 吗？
约翰：50% 什么？
简：Exactly!
简：百分比是相对值。你总是要问“什么的百分比？”。通过声明每个父母的明确身高body and html您为每个孩子建立一个具有百分比身高的参考框架，使身高发挥作用。
Examples
假设您希望 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>
示例代码
Use 100vh
正如您所看到的，百分比高度有点棘手。您可以通过简单地使用来避免复杂性（即，永远不必考虑父元素）视口百分比高度。每当您希望盒子的高度与视口相同时，请使用height: 100vh代替height: 100%。不需要其他任何东西。
绝对定位异常
如中所述the spec，绝对定位的元素是百分比高度规则的例外。更多详细信息请参见此处：将 100% 高度应用于嵌套的非 Flex 元素.
