html高度为什么不能用百分比,为什么百分比高度不适用于我的div？

使用CSS height属性和百分比值

CSS height属性与百分比值一起使用时，将根据元素的包含块计算。

假设你的body元素有height: 1000px。然后一个孩子height: 90%将获得900px。

如果您没有为包含块设置显式高度(并且子项未定位)，那么具有百分比高度的子元素将无法继续，高度将由内容和其他属性确定。

从规格：百分比

指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则该值将计算为“auto”。

auto

高度取决于其他属性的值。

因此，如果要在div中使用百分比高度，请指定所有父元素的高度，包括根元素(例如，html, body {height:100%;})

需要注意的是min-height和max-height是不能接受的。它必须是height财产。

这是一个小小的总结：约翰：我想将div的高度设置为100％。

简：100％的是什么？

约翰：100％的容器。所以，父母一级上来。

简：好的。div的父母的高度是多少？

约翰：没有。我想是自动的。内容驱动。

简：那么，你想让div具有100％未知变量的高度？

约翰：[沉默]

简：嘿约翰，我可以拿50％吗？

约翰：50％的什么？

简：没错！

简：百分比是相对值。你总是要问“什么的百分比？”。通过为每个父项声明一个明确的高度，body并html为每个具有百分比高度的子项建立一个引用框架，使高度起作用。

例子

假设您希望div的父级高度为50％。

这不起作用：

这也不会：

这也不会：

这也会失败：

现在，它最终会起作用：

这也有用：

但不是这个：

使用 100vh

如您所见，百分比高度有点棘手。您可以通过简单地使用视口百分比高度来避免复杂性(即，永远不必考虑父元素)。只要您希望框是视口的高度，请使用height: 100vh而不是height: 100%。不需要任何其他东西。

绝对定位例外

如规范中所述，绝对定位的元素是百分比高度规则的例外。更多细节：将100％高度应用于嵌套的非柔性元素。