如何将滚动条仅用于引导modal dialog中的模态体
我有以下元素
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> 它显示了这样的modal dialog，基本上它把滚动条放在整个modal dialog中，而不是包含我试图显示的内容的模态体。
图像看起来像这样 – http://imgur.com/0ZZRjnJ
我怎样才能获得只有模态身体的滚动条？ 我试图指定style =“overflow-y：scroll; max-height：85％; margin-top：50px; margin-bottom：50px;” 模态身体，这并没有奏效。
你必须设置.modal-body的height ，并给它overflow-y: auto 。 .modal-dialog溢出值重置为initial值。
查看工作示例：
http://www.bootply.com/T0yF2ZNTUd
.modal{ display: block !important; /* I added this to see the modal, you don't need this */ } /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ height: 250px; overflow-y: auto; }
如果您只支持IE 9或更高版本，则可以使用这个可平滑缩放到窗口大小的CSS。 您可能需要调整“200px”，具体取决于页眉或页脚的高度。
.modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; }
联合解决scheme@ carlos calla和@jonathan marston解决了问题。
/* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; }
可选 ：如果您不希望模式超出窗口高度并在.modal-body中使用滚动条，则可以使用此响应式解决scheme。 在这里看到一个工作演示： http : //codepen.io/dimbslmh/full/mKfCc/
function setModalMaxHeight(element) { this.$element = $(element); this.$content = this.$element.find('.modal-content'); var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); var dialogMargin = $(window).width() > 767 ? 60 : 20; var contentHeight = $(window).height() - (dialogMargin + borderWidth); var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; var maxHeight = contentHeight - (headerHeight + footerHeight); this.$content.css({ 'overflow': 'hidden' }); this.$element .find('.modal-body').css({ 'max-height': maxHeight, 'overflow-y': 'auto' }); } $('.modal').on('show.bs.modal', function() { $(this).show(); setModalMaxHeight(this); }); $(window).resize(function() { if ($('.modal.in').length != 0) { setModalMaxHeight($('.modal.in')); } });
加上卡洛斯·卡拉的伟大的答案。
必须设置.modal-body的高度，但是您可以使用媒体查询来确保适合屏幕尺寸。
.modal-body{ height: 250px; overflow-y: auto; } @media (min-height: 500px) { .modal-body { height: 400px; } } @media (min-height: 800px) { .modal-body { height: 600px; } }
或者更简单的，你可以先放在你的标签之间，然后放到css类。
<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
一个简单的js解决scheme来设置与身高成正比的模态高度：
$(document).ready(function () { $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>'); });
身体的高度必须是100％：
html, body { height: 100%; min-height: 100%; }
我将模态身体高度设置为身体的80％，这当然可以定制。
希望能帮助到你。
#scroll-wrap { max-height: 50vh; overflow-y: auto; }
使用vh作为modal-body上的单位或modal-body的包装div的max-height 。 当用户调整窗口大小时，这将自动调整modal-body的高度或包装div的高度（在本例中）。
vh是表示视口高度的视口大小的1％的长度单位。
vh单元的浏览器兼容性图表。
例如： https ： //jsfiddle.net/q3xwr53f/
我知道这是一个老话题，但这可能会帮助别人。
我能够通过固定modal dialog元素的位置来进行滚动。 而且由于我永远不会知道浏览器窗口的确切高度，所以我拿走了我确定的信息，页眉和页脚的高度。 然后，我可以使模式身体元素的顶部和底部边距匹配那些高度。 这就产生了我正在寻找的结果。 我扔了一把小提琴展示我的作品。
另外，如果你想要一个全屏对话框，只需取消注释宽度：auto; 在.modal-dialog.full-screen部分中。
https://jsfiddle.net/lot224/znrktLej/
这里是我用来修改引导对话框的CSS。
.modal-dialog.full-screen { position:fixed; //width:auto; // uncomment to make the width based on the left/right attributes. margin:auto; left:0px; right:0px; top:0px; bottom:0px; } .modal-dialog.full-screen .modal-content { position:absolute; left:10px; right:10px; top:10px; bottom:10px; } .modal-dialog.full-screen .modal-content .modal-header { height:55px; // adjust as needed. } .modal-dialog.full-screen .modal-content .modal-body { overflow-y: auto; position: absolute; top: 0; bottom: 0; left:0; right:0; margin-top: 55px; // .modal-header height margin-bottom: 80px; // .modal-footer height } .modal-dialog.full-screen .modal-content .modal-footer { height:80px; // adjust as needed. position:absolute; bottom:0; left:0; right:0; }
