如何只为模态体放置滚动条? [英] How to put scroll bar only for modal-body?

问题描述

我有以下元素:

<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 class="modal-body"></div><div class="modal-footer"></div>

它显示了类似这样的模式对话框，基本上，它在整个 modal-dialog 周围放置滚动条，而不是包含我试图显示的内容的 modal-body.

图像看起来像这样:

如何仅在 modal-body 周围设置滚动条?

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

解决方案

你必须在.modal-body中设置height并给它溢出-y:自动.还将 .modal-dialog 溢出值重置为 initial.

查看工作示例:

http://www.bootply.com/T0yF2ZNTUd

.modal{显示:阻止！重要；/* 我添加这个是为了查看模态，你不需要这个 */}/* 重要部分 */.modal-对话框{溢出-y:初始！重要}.modal-body{高度:80vh；溢出-y:自动；}

I have the following element:

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

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.

The image looks something like this:

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

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.

解决方案

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.

See the working sample:

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

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