需要在背景中滚动具有大高度的 Bootstrap 模态答案

【问题标题】：Need to scroll Bootstrap modal with large height with the background需要在背景中滚动具有大高度的 Bootstrap 模态
【发布时间】：2016-04-16 00:07:03
【问题描述】：

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

现在为了实现这一点并解决了很多类似的问题，我对模态类进行了以下更改：

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

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

提前致谢。

【问题讨论】：

我对您的要求感到困惑 - 您不想要滚动条，但您的内容在某些设备尺寸上溢出（垂直高度比您的开发机器小）。我认为没有解决方案，您的内容大于可用空间 - 内容较少或允许滚动？
“模态框应随背景移动”是什么意思，如果模态框的高度高于视图，并且随页面移动，用户将如何看到其余部分模型？直到他完成滚动？
Adjusting the width is not a solution as I can never be sure what the resolution will be. 使用媒体查询会克服这个限制吗？

标签： html css twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

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

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

在jsfiddle观看此现场演示

【讨论】：