将引导模式-主体内容更改为可滚动的

Question

我已经使用了bootstrap，但对flexbox css来说有点新。

我有我的bootstrap模式，通常有头部，身体和脚注。我想改变模型体类这样一种方式，如果内容太大，那么它将是可滚动的，保持模型头和模型脚在固定位置。我想使用flexxcss，但我不确定它是如何工作的。我已经使用下面的flexxcss属性

模板:

 <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。内容是可见的和溢出的。我不知道最好的方法来解决这个

任何建议，评论都将受到欢迎!

Answer 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测试