全高引导程序网格-带有嵌套溢出-y:滚动



我在引导程序网格和带有overflow-y的嵌套div方面遇到了问题。就像在这篇堆栈溢出文章中提到的,我试图添加一个min-height:0到父祖先,但无法使其运行。

左Chrome,右:Firefox

在Chrome中,布局显示正常(没有浏览器滚动条(,红色区域的滚动条标记为溢出-y:scroll。

在Firefox中,布局不正常(显示浏览器滚动条,红色区域没有滚动条(

我的目标是拥有一个100%高度的网页,在所有浏览器中都有一个垂直分隔的右栏(25%|75%(和红色区域的滚动条;-(

我已经把来源放进了一个代码笔

有什么建议,如何实现预期行为?

我已经对您的代码进行了一些调整,请查看这个fiddle。

尝试将height: 100vh;添加到.bg-secondary。此外,我已将overflow-y: scroll移动到.bg-danger

请确保您已经导入了所有必要的引导文件,我使用了bootstrap.min.js(v4.1.3(、bootstrap.css(v44.1.3(、popper.min.js(1.12.9(、jquery-3.2.1.slim.min.js

最新更新