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

时间:2018-11-15 15:13:18

标签: html css bootstrap-4 grid-layout

我在使用引导网格和带有y的嵌套div时遇到问题。 就像this stack overflow post中提到的那样,我尝试添加一个min-height:0 到父祖先,但无法运行。

left Chrome, right: Firefox

在Chrome中,布局可以正常显示(没有浏览器滚动条),滚动条位于红色区域并标有溢出-y:滚动。

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

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

我已将来源放入codepen

任何建议,如何实现预期的行为?

1 个答案:

答案 0 :(得分:0)

我对您的代码进行了一些调整,请查看此fiddle

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

并确保已导入所有必需的引导程序文件,我使用了bootstrap.min.js(v4.1.3),bootstrap.css(v4.1.3),popper.min.js(1.12.9),jquery -3.2.1.slim.min.js