我有以下元素:

<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> 

它显示模态对话框,基本上,它把滚动条放在整个模态对话框周围,而不是包含我要显示的内容的模态主体周围。

图片看起来是这样的:

我如何得到一个滚动条周围的情态体只?

我试过分配style="overflow-y: scroll;max-height: 85%;margin-top: 50 px;Margin-bottom:50px;"到模态体,但它没有工作。


当前回答

对我来说有用的是将高度设置为100%,并在自动状态下溢出 希望这能有所帮助

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

其他回答

你必须设置。modal-body的高度并赋予它overflow-y: auto。同时将.modal-dialog溢出值重置为初始值。

参见工作示例:

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: 80vh;
    overflow-y: auto;
}
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

在模态体上使用max-height和vh作为单位,或者在模态体内部使用包装器div。当用户调整窗口大小时,这将自动调整模态体或包装div(在本例中)的高度。

Vh是长度单位,表示视口高度占视口大小的1%。

vh单元的浏览器兼容性图表。

例如:https://jsfiddle.net/q3xwr53f/

对我来说有用的是将高度设置为100%,并在自动状态下溢出 希望这能有所帮助

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

卡洛斯·卡拉的回答很好。

.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; }
}

如果你只支持IE 9或更高版本,你可以使用这个CSS来平滑地缩放到窗口的大小。你可能需要调整“200px”,这取决于你的页眉或页脚的高度。

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}