试图实现某种具有动态高度的可滚动容器
Trying to achieve some kind of scrollable container with dynamic height
我 <div> 里面有一些动态内容 - 有时是 table，有时是文本。我正在尝试设置某种容器，如果它的内容对于屏幕来说太大的话，它可以在 y 轴上滚动。
一些谷歌搜索表明，如果您对 div 的 height 进行硬编码，这很容易做到，但是如果我想避免在任何地方指定确切的像素大小，我应该怎么做？
据我了解，我必须先计算剩余的垂直可见屏幕space，然后将其设置为div height。这似乎是一项相当常见的任务，但我找不到任何组件（不管它们是否 jquery 依赖）可以完成此任务。
有什么建议吗？已经存在的解决方案（插件、库等）是首选。
如果您希望容器高度在与视口高度匹配时开始滚动，您可以只给它 height 或 max-height 等于 100vh（100% 视口高度).
如果容器外有其他元素并且它不应该占据全屏高度，您可以使用 calc() 来限制它：
.container { max-height: calc(100vh - 100px); }
我 <div> 里面有一些动态内容 - 有时是 table，有时是文本。我正在尝试设置某种容器，如果它的内容对于屏幕来说太大的话，它可以在 y 轴上滚动。
一些谷歌搜索表明，如果您对 div 的 height 进行硬编码，这很容易做到，但是如果我想避免在任何地方指定确切的像素大小，我应该怎么做？
据我了解，我必须先计算剩余的垂直可见屏幕space，然后将其设置为div height。这似乎是一项相当常见的任务，但我找不到任何组件（不管它们是否 jquery 依赖）可以完成此任务。
有什么建议吗？已经存在的解决方案（插件、库等）是首选。
如果您希望容器高度在与视口高度匹配时开始滚动，您可以只给它 height 或 max-height 等于 100vh（100% 视口高度).
如果容器外有其他元素并且它不应该占据全屏高度，您可以使用 calc() 来限制它：
.container { max-height: calc(100vh - 100px); }