css - 高度/宽度 : 100% and --webkit-fill-available 之间有什么区别

Question

我已经使用 100% 和 --webkit-fill-available 很长时间了。 有时 --webkit-fill-available 会给出除 height: 100% 以外的其他结果。

有人知道它们之间有什么区别吗？

 {
   height: --webkit-fill-available
 }

 {
   height: 100%
 }

Answer 1

首先，避免使用前缀属性，因为它们仅受特定浏览器支持。

-webkit-fill-available 是 WebKit 浏览器用于 stretch 的非标准名称，a experimental feature that should not be used in production .

我猜 fit-content 会具有相同的行为，并具有受所有现代浏览器支持的优势。 According to MDN :

The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content [the intrinsic maximum width or height of the content].

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