css height/width有什么区别：100%和--webkit-fill-available [重复]

xxe27gdn 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(335)

此问题已在此处有答案：

Putting -moz-available and -webkit-fill-available in one width property [duplicate]（3个答案）
昨天关门了。
我已经使用100%和--webkit-fill-available很长时间了。有时--webkit-fill-available会给我身高以外的结果：百分百确定
有没有人知道它们之间的区别是什么？

{
   height: --webkit-fill-available
 }

 {
   height: 100%
 }

css

来源：https://stackoverflow.com/questions/69286528/what-are-the-differences-between-height-width-100-and-webkit-fill-available

2条答案

按热度按时间

dojqjjoe1#

首先，避免使用前缀属性，因为它们只被特定的浏览器支持。
-webkit-fill-available是WebKit浏览器对stretch、a experimental feature that should not be used in production使用的非标准名称。
我猜fit-content也会有同样的行为，因为它的优点是被所有现代浏览器支持。According to MDN：

**fit-content**的行为类似于fit-content(stretch)。实际上，这意味着盒子将使用可用空间，但不会超过max-content [内容的固有最大宽度或高度]。

最后，height: 100%等于元素的包含块的高度。

赞(0）回复(0）举报 2023-04-13

edqdpe6u2#

height: fit-content取子级的大小
height: fill-available获取浏览器中可见空间的大小
height: 100%采用父级的完整大小。如果父级位于导航栏后面，则会有内容被其隐藏。
不过，我建议你使用new viewport units。