html - CSS 自适应样式 - 将滚动添加到没有定义高度的侧边栏

Question

我正在创建一个基本的网络应用程序，其中包含一个侧边栏，该侧边栏的大小根据其中的元素数量进行垂直调整。

我希望网络应用程序具有自适应大小，因此可以在任何尺寸的设备上运行。

当用户垂直缩小视口(viewport)并且边栏中的一些元素溢出视口(viewport)时，我希望边栏缩小而不溢出视口(viewport)，并允许滚动其内容。

侧边栏不是预定义的高度(例如 50% 或 700px)，因为它由其中的元素数量决定(可能是 3，可能是 30)。

下图是我可以想象我想要做什么的最佳方式:

CSS example

白色:是视口(viewport)

淡蓝色:是侧边栏

深蓝色:侧边栏内的元素

灰色:是滚动条

当侧边栏是预定义的高度时，我可以使用 overflow: auto 让它工作，但是当我没有定义侧边栏的高度时，我无法让它工作，并将其留给子元素来确定它的高度。

如有任何帮助，我们将不胜感激!

Answer 1

如果我能理解为真，您可以在您的 css 中使用 calc() 函数。

例如:如果您在视口(viewport)(高度)上显示 5 个元素，则可以使用此代码来设置元素样式:

高度:计算(100vh/5)

这段代码的意思是:将整个表观高度除以 5。

例如:https://jsfiddle.net/uniak/rgzf9nmy/