如何将滚动条仅用于模体? [英] How to put scroll bar only for modal-body?

问题描述

我具有以下元素:

<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-body上.

It shows modal dialog something like this, basically, it puts scroll bar around entire modal-dialog and not modal-body that contains the content I am trying to display.

图像看起来像这样:

如何仅在modal-body周围获得滚动条?

How do I get a scroll bar around modal-body only?

我尝试将style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"分配给modal-body，但是没有用.

I have tried assigning style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" to modal-body but it didn't work.

推荐答案

您必须在其中设置.modal-body的height并将其赋予overflow-y: auto.还将.modal-dialog溢出值重置为initial.

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to 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;
}

这篇关于如何将滚动条仅用于模体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！