изменить содержимое модального тела начальной загрузки, чтобы его можно было прокручивать

Я использовал bootstrap, но новичок в 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. Содержимое видно и переполняется. Я не знаю, как это исправить

Любые предложения, комментарии будут оценены, ребята!


css bootstrap-modal bootstrap-4
person Vish021    schedule 17.08.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это было простое исправление: вы добавляете 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>

Fiddle протестирован в IE-10

person Shehary    schedule 24.08.2015