使用Clarity和Angular 6，我在主要内容区域中有一张卡片，我想填充当前视图的长度（不多也不少） . 我发现接近的唯一方法是将高度设置为“-webkit-fill-available”（现在仅使用Chrome） .
这个问题是底部似乎有一点点空间导致内容区域显示滚动条 .
理想情况下，我希望永远不会在内容区域中看到滚动条，并使所有内容都适合当前屏幕高度 .
Here is a stackblitz example表明了这个问题 .
使用Clarity和Angular 6，我在主要内容区域中有一张卡片，我想填充当前视图的长度（不多也不少） . 我发现接近的唯一方法是将高度设置为“-webkit-fill-available”（现在仅使用Chrome） .
这个问题是底部似乎有一点点空间导致内容区域显示滚动条 .
理想情况下，我希望永远不会在内容区域中看到滚动条，并使所有内容都适合当前屏幕高度 .
Here is a stackblitz example表明了这个问题 .
1 回答
您的解决方案不是标准，并且无法在IE / Edge上运行，并且可能无法在Safari中使用https://caniuse.com/#search=fill-available .
你可以尝试给它一个
height: calc(100vh - 5.5rem);，它给卡片一个视图端口的高度，但是减去 Headers 栏的高度和卡片和内容区域的边缘 . 最终，要使用CSS来计算高度，您需要知道页面上的其他元素是什么，并根据已知的高度进行计算，否则您必须使用JavaScript来检查页面元素以找到可用空间 .