使用可滚动的固定列创建嵌套布局

Question

我将尽力清楚地解释这一点。如果重要的话，我还将使用Bulma CSS框架。所以我要创建的布局就是这个。

我创建了一个可以使用seen in action here

的工作版本

但是，在工作示例中，可滚动框的vh / px固定为一定值，我正在使用Bulma CSS框架中的图块。我尝试使用列，并且发生了相同的结果。如果我不想将其固定为固定大小，它会延伸到整个屏幕之外，但是无论大小如何，我都希望它适合整个屏幕，并且唯一可滚动的部分应该是我上面显示的绿色框。另外，在某些情况下，该框甚至可能没有足够的内容可滚动，在那种情况下，即使它是空的，我仍然希望它用框填充其余的高度。

As you can see here，如果未明确设置高度，它将继续越过屏幕，但是如果设置正确，它将按预期工作。我想知道无论如何调整大小等如何使这个高度正确填充空间。

任何帮助将不胜感激！

Answer 1

听起来您应该在内容的包装上设置height属性并设置overflow: scroll;，然后所有内容将是您设置的高度，并且具有可滚动的内容。