css – 如何将滚动条仅用于模态体在引导模式对话框

前端之家收集整理的这篇文章主要介绍了css – 如何将滚动条仅用于模态体在引导模式对话框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下元素
<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>

显示模态对话框这样,基本上它把滚动条围绕整个模态对话框,而不是模态体,包含我想显示内容

图像看起来像这样 – http://imgur.com/0ZZRjnJ

如何让滚动条只有模态体?
我试图分配style =“overflow-y:scroll; max-height:85%; margin-top:50px; margin-bottom:50px;到模态体,并没有工作。

解决方法

你必须设置.modal体的高度,并给它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: 250px;
    overflow-y: auto;
}

猜你在找的CSS相关文章