html - 需要用背景滚动大高度的 Bootstrap 模态

Question

我有一个高度超过浏览器屏幕高度的引导模式。要求是模式不应该有任何垂直滚动条。页面可以有一个。另一个是模式应该与背景一起移动。

现在为了实现这一目标并经历了很多类似的问题，我对模态类进行了以下更改:

.modal{
 position: from 'fixed' to 'absolute';
 overflow-y: from 'auto' to 'hidden'
}

虽然这解决了我的问题，因为没有滚动条出现并且模式随背景一起移动，但问题是在较小的屏幕或分辨率较低的屏幕中，内容会丢失/隐藏。调整宽度不是解决方案，因为我永远无法确定分辨率是多少。

提前致谢。

Answer 1

下面可能是您的解决方案。只需将这些 CSS 放入您的样式表即可。

    .modal-open{
        overflow-y: scroll;
    }
    .modal-open .modal{
        overflow-y: initial;
    }
    .modal{
        position: absolute;
        bottom:initial
    }

在 jsfiddle 上查看此现场演示