使用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%高度应用于嵌套的非柔性元素。