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

我有以下元素:

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

当前回答

如果你只支持IE 9或更高版本，你可以使用这个CSS来平滑地缩放到窗口的大小。你可能需要调整“200px”，这取决于你的页眉或页脚的高度。

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

2015-08-07 16:15:02

其他回答

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

.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

这是我网站上完整的Sass重写(仍在构建中，一旦准备好就会添加到这里) 它是100%的移动响应和适合屏幕(只有当内容足够大时，否则宽度和高度将适合内容，所以是的，它是灵活的):

在大于576px (sm)的屏幕上，间距为1.75rem(4边相等) 在小于576px的屏幕上的间距为0.5rem

对于灵活且可滚动的模态体，注释为required的行是所需的最小代码。

.modal-header,
.modal-footer {
  border: none !important;
}

.modal-dialog {
  height: 100% !important; // required
  margin: 0 0.5rem !important;
  padding: 0.5rem 0 !important;
  overflow-y: initial !important; // required

  @media (min-width: $sm) {
    margin: 0 auto !important;
    padding: 1.75rem 0 !important;
    max-width: initial !important; // overwrite default max-width
    width: fit-content !important; // flexible width
    min-width: 500px !important; // makes it fat enough by default
  }
}

.modal-content {
  max-height: 100% !important; // required
}

.modal-body {
  padding-top: 0 !important;
  overflow-y: auto !important; // required
}

2021-03-04 09:51:56

对于引导版本>= 4.3

Bootstrap 4.3增加了新的内置滚动功能的模态。如果内容的大小可以使页面滚动，则只使情态体内容滚动。要使用它，只需将类modal-dialog-scrollable添加到具有modal-dialog类的相同div中。

这里有一个例子:

2019-05-21 00:24:42

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

如果你只支持IE 9或更高版本，你可以使用这个CSS来平滑地缩放到窗口的大小。你可能需要调整“200px”，这取决于你的页眉或页脚的高度。

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

2015-08-07 16:15:02

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

推荐文章

最新文章

标签