1

我使用过引导程序，但对 flexbox css 来说有点新。

我有我的引导模式，通常有页眉、正文和页脚。我想以这样一种方式更改模型主体类，如果内容太大，那么它将是可滚动的，将模型页眉和模型页脚保持在固定位置。我想过使用 flexbox css，但我不确定它是如何工作的。我在下面使用了 flexbox css 属性

模板：

 <div class="modal-header">
   <!-- contents.. -->
 </div>
 <div class="modal-body">
   <!-- contents.. -->
 </div>
 <div class="modal-footer">
   <!-- contents.. -->
 </div>

CSS：

.modal-content {
 display: flex;
 flex-direction: column;
 max-height: calc(100vh - 60px);
}

.modal-body {
   overflow: auto;
}

.modal-header, .modal-footer {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

我将模型内容作为最大视口高度 - 60px。除了在 IE 中，这工作正常。内容可见且溢出。我不知道解决这个问题的最佳方法

任何建议，评论将不胜感激！

4

1 回答 1

1

这是一个简单的修复，您添加max-height: calc(100vh - 60px);到modal-content选择器，删除它并将其添加到modal-body选择器

CSS

.modal-content {
    display: flex;
    flex-direction: column;
}
.modal-body {
    overflow: auto;
    max-height: calc(100vh - 60px);
}
.modal-header, .modal-footer {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

模态

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                This Is header
            </div>
            <div class="modal-body">
                This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content 
            </div>
            <div class="modal-footer">
                This is footer
            </div>
        </div>
    </div> 
</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

在 IE-10 中测试的小提琴

于 2015-08-24T13:43:20.917 回答