如何仅为模态体放置滚动条？

小编典典

如何仅为模态体放置滚动条？

all

我有以下元素：

<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包含我要显示的内容。

图像看起来像这样：

如何modal-body只获得滚动条？

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

阅读 58

2022-06-25

共1个答案

小编典典

你必须设置heightin.modal-body并给出它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: 80vh;
    overflow-y: auto;
}

2022-06-25