javascript - 试图实现某种具有动态高度的可滚动容器

Question

我有<div>里面有一些动态内容——有时是表格，有时是文本。我正在尝试设置某种容器，如果它的内容对于屏幕而言太大，那么它可以在 y 轴上滚动。

一些谷歌搜索表明，如果您对 height 进行硬编码，这很容易做到的 div ，但是如果我想避免在任何地方指定精确的像素大小，我应该怎么做呢？

据我了解，我必须先计算剩余的垂直可见屏幕空间，然后将其设置为 div height .这似乎是一项相当常见的任务，但我找不到任何组件(不管它们是否依赖 jquery)可以完成此任务。

有什么建议吗？已存在的解决方案(插件、库等)是首选。

Answer 1

如果你希望容器高度在匹配视口(viewport)高度时开始滚动，你可以只给它 height 或 max-height 等于 100vh (100% 视口(viewport)高度)。

如果容器外有其他元素并且它不应该占据全屏高度，您可以使用 calc() 来限制它:

.container { max-height: calc(100vh - 100px); }