清晰卡填充屏幕高度

Question

使用Clarity和Angular 6，我在主要内容区域中有一张卡片，我想填充当前视图的长度（不多也不少）。我发现接近的唯一方法是将高度设置为“-webkit-fill-available”（现在仅使用Chrome）。

问题在于底部似乎有一点空间导致内容区域显示滚动条。

理想情况下，我希望永远不会在内容区域中看到滚动条，并使所有内容都适合当前的屏幕高度。

Here is a stackblitz example证明了这个问题。

Answer 1

您的解决方案不是标准，不适用于IE / Edge，并且可能无法与Safari https://caniuse.com/#search=fill-available一起使用。

您可以尝试给它一个height: calc(100vh - 5.5rem);，它会给卡片提供视图端口的高度，但会减去标题栏的高度以及卡片和内容区域的边距。最后，要使用CSS来计算高度，您需要知道页面上的其他元素并根据这些已知高度进行计算，否则您必须使用JavaScript来检查页面元素以找到可用的空间。