固定高度的容器,具有根据窗口高度调整大小的滚动

时间:2019-10-29 13:15:45

标签: html css sass

我有一个Angular Material表,希望页眉和页脚保持粘性并使内容滚动。为此,我只需要将表格放在容器中,将高度设置为一定数量的像素,然后将溢出设置为自动。这按预期工作。我只需要这样的东西就可以在多种分辨率下工作。如果我将div设置为600px,则在我的计算机上看起来不错,但其他人会看到一个双滚动条。

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

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

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

1 个答案:

答案 0 :(得分:1)

使用vh而不是%

height: calc(100vh-200px)