html - 具有滚动功能的固定高度容器，可根据窗口高度调整大小

Question

我有一个 Angular Material 表，我希望页眉和页脚是粘性的，内容是滚动的。为此，我只需要将表格放入容器中，将高度设置为一定数量的像素，然后将溢出设置为自动。这按预期工作。我只需要这样的东西来处理多种分辨率。如果我将 div 设置为 600px，它在我的电脑上看起来很棒，但其他人会看到双滚动条。

如前所述，如果我将高度设置为固定数量的像素，效果会很好(例如:高度:600 像素)。我试过使用 calc 函数(例如:height: calc(100%-200px))，但这似乎不起作用，表格占据了所有空间。

我以 10px 的间隔进行了一系列媒体查询，并在每个媒体查询中设置了固定高度。这可行，但似乎是一个糟糕的解决方案。

我觉得必须有一种方法可以将固定容器的高度设置为屏幕高度减去一定数量的像素(以考虑标题和底部的一些空白)。

Answer 1

使用 vh 而不是 %

height: calc(100vh-200px)