如何把滚动条只为情态体?

我有以下元素:

<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;"到模态体，但它没有工作。

当前回答

一个简单的js解决方案来设置模式高度成比例的身体的高度:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

身体的高度必须是100%

html, body {
    height: 100%;
    min-height: 100%;
}

我将模态体高度设置为体的80%，这当然可以定制。

希望能有所帮助。

2015-10-04 16:50:39

其他回答

你必须设置。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;
}

2014-09-16 17:06:59

或者更简单一点，你可以先放在标签之间，然后放到css类中。

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

2017-05-17 17:38:53

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

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

2015-07-11 19:21:32

在最新的引导版本中，有一个类使模态体可滚动。

.modal-dialog-scrollable到.modal-dialog。

用于模态体可滚动内容的引导模态链接

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

2020-06-17 08:43:20

如果您正在使用4.5或更高版本的引导，则添加类modal-dialog-scrollable

else

.modal-body{
    height :100%;
    over-flow-y:auto;
}

2021-03-15 04:14:34

如何把滚动条只为情态体?

推荐文章

最新文章

标签