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

标签 javascript html css layout bulma

我会尽力解释清楚。如果重要的话,我也会使用 Bulma CSS 框架。所以我要创建的布局是这样的。

enter image description here

我创建了一个可以工作的版本 seen in action here

但是,在工作示例中,可滚动框的 vh/px 固定为一定数量,我使用的是 Bulma CSS 框架中的图 block 。我尝试使用列,结果相同。如果我不让它成为一个固定的数量,它只会延伸到屏幕之外,但我希望它适合整个屏幕而不管大小,唯一可滚动的部分应该是我上面显示的绿色框。此外,在某些情况下,该框甚至可能没有足够的内容来滚动,在这种情况下,我仍然希望它用框填充剩余的高度,即使它是空的。

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

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

最佳答案

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

关于javascript - 使用可滚动的固定列创建嵌套布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56351390/

相关文章:

javascript - 为什么javascript/jquery-feature不能应用于多个节点?

php - 使用表单字段值自定义 CSS 属性

javascript - Bootstrap-4.0.0 li 如何在右 Angular 对齐

html - <img> 顶部的 CSS 背景图片

jquery - 使用 Bootstrap 和 Aurelia 附加的井的随机移动

html - CSS偏移但保持全宽

javascript - 使用 Bower 发布 TypeScript 库

javascript - 使用 JavaScript 的动态 div

javascript - 无法通过 Javascript 编辑 Iframe 的 'src' 值

html - 为什么浏览器为重音字符保留空间,即使没有重音字符?