我正在为我正在进行的项目使用twitter引导程序。
我有一个模态窗口，它有一个更长的形式，我不喜欢当窗口变得太小时，模态就不会滚动（如果只是从我的页面上消失了，那就不可滚动了）。
为了解决这个问题，我使用了以下css
.modal {
overflow-y:auto;
max-height:90%;
margin-top:-45%;
}
这正是我在Chrome中想要的方式（也就是说，当窗口足够大时，表单是全尺寸的，但随着窗口的缩小，模态会缩小并变得可滚动）。问题是IE中的模态不在屏幕上。有人能更好地解决这个问题吗？
我的例子可以在tinyhousemap.com上找到（点击导航窗口中的"向地图添加条目"以显示模式）
感谢
下面的解决方案怎么样？它对我有效。试试这个：
.modal .modal-body {
max-height: 420px;
overflow-y: auto;
}
详细信息：
- 从.modal类中删除
overflow-y: auto;或overflow: auto;（重要） - 从
.modal类中删除max-height: 400px;（重要） - 将
max-height: 400px;添加到.model.model主体（或者，可以是420px或更少，但不会超过450px） - 将
overflow-y: auto;添加到.modal .modal-body
完成，只有正文将滚动。
我只使用jQuery完成了一个微小的解决方案。
首先，你需要在你的<div class="modal-body">中添加一个额外的类，我称之为"ativa卷轴"，所以它变成了这样：
<div class="modal-body ativa-scroll">
所以现在把这段代码放在你的页面上，靠近你的JS加载：
<script type="text/javascript">
$(document).ready(ajustamodal);
$(window).resize(ajustamodal);
function ajustamodal() {
var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
$(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
}
</script>
我非常适合自己，而且反应灵敏！：）
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
这适用于没有JS代码的Bootstrap 3，并且具有响应性。
源
尝试并覆盖引导程序的：
.modal {
position: fixed;
带有：
.modal {
position: absolute;
它对我有效。
我还添加了
.modal { position: absolute; }
到样式表，允许对话框滚动，但如果用户向下移动到长页面的底部，则模态可能最终隐藏在可见区域的顶部。
我知道这在bootstrap 3中不再是一个问题，但在我们升级之前，我一直在寻找一个相对快速的解决方案。在打开模式之前，我最终得到了上面的结果，并调用了以下命令
$('.modal').css('top', $(document).scrollTop() + 50);
似乎在火狐，Chrome，IE10 8&7（我不得不交出的浏览器）
您的模态被隐藏在firefox中，这是因为您的通用样式表中有负边距声明：
.modal {
margin-top: -45%; /* remove this */
max-height: 90%;
overflow-y: auto;
}
去掉负边距，一切都会很好。
如果使用.modal {overflow-y: auto;}，当正文已经溢出时，将在页面右侧创建额外的滚动条。
解决方法是暂时从正文标记中删除溢出，并将模态overflow-y设置为auto。
示例：
$('.myModalSelector').on('show.bs.modal', function () {
// Store initial body overflow value
_initial_body_overflow = $('body').css('overflow');
// Let modal be scrollable
$(this).css('overflow-y', 'auto');
$('body').css('overflow', 'hidden');
}).on('hide.bs.modal', function () {
// Reverse previous initialization
$(this).css('overflow-y', 'hidden');
$('body').css('overflow', _initial_body_overflow);
});
@grenoult的CSS解决方案（主要有效）的问题是，当键盘弹出时（即，当他们点击模式对话框中的输入时），屏幕大小发生变化，模式对话框的大小也发生变化，它可以隐藏他们刚刚点击的输入，这样他们就看不到自己在键入什么。
对我来说，更好的解决方案是使用jquery，如下所示：
$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });
它对更改窗口大小没有响应，但这种情况并不经常发生。
我能够通过在.modal车身元素上使用具有最大高度的"vh"度量来克服这一问题。70vh看起来很适合我使用。然后将overflow-y设置为auto，使其仅在需要时滚动。
.modal-body {
overflow-y: auto;
max-height: 70vh;
}
所有这些都无法按预期工作。。正确的方法是更改位置：对于.modal类，固定到位置：绝对