-webkit-fill-available 有什么用？

Question

PIC-1

这就是我所拥有的（图1）

PIC-2

这就是我需要的（图2）

在pic-2中我添加了

width: -webkit-fill-available;

我得到了我所期望的。但我不知道它是如何运作的。

Answer 1

因此，您需要了解两件事：

 -webkit-fill-available;

-webkit 部分是 safari 或 chrome 等浏览器的扩展，您可以在这里找到更多示例： https: //developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions 这意味着这段代码不会在 firefox 中工作，覆盖所有浏览器，你可以使用类似的东西：

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

“填充可用”部分意味着该元素将扩展以占据其容器中的所有可用空间。这就是为什么你的线拉长了。

希望我能为你解决这个问题。