清晰卡片填充到屏幕高度

Question

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

问题是底部似乎有一点点 space 导致内容区域显示滚动条。

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

Here is a stackblitz example 说明了问题。

Answer 1

您的解决方案不是标准的，无法在 IE/Edge 上运行，并且根据 https://caniuse.com/#search=fill-available。

可能无法与 Safari 一起正常运行

您可以尝试给它一个 height: calc(100vh - 5.5rem);，它给卡片一个视口的高度，但减去卡片和内容区域的 header 条和边距的高度。最终，要使用 CSS 计算高度，您需要知道页面上还有哪些其他元素并根据这些已知高度进行计算，否则您必须使用 JavaScript 来检查元素找到可用的页面 space。