it-roy-ru.com

Установить загрузочную модальную высоту тела в процентах

Я пытаюсь сделать модальное тело с прокруткой, когда содержимое становится слишком большим. Однако я хочу, чтобы модал реагировал на размер экрана. Когда я устанавливаю максимальную высоту на 40%, это не имеет никакого эффекта. Однако, если я установлю максимальную высоту в 400 пикселей, она будет работать, как и ожидалось, но не будет реагировать. Я уверен, что мне просто не хватает чего-то простого, но я не могу заставить его работать.

Вот пример

Не работает:

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Работает:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}
22
thraxst

Это сработало для меня

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

Скрипка: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

39
Mehmet Ataş

Вместо использования%, единицы vh устанавливают его в процентах от размера области просмотра (окна браузера). 

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

Если вы просто хотите, чтобы содержимое прокручивалось, вы можете пропустить часть, ограничивающую размер модального тела.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}
25
Ryan

Это должно работать для всех, любые разрешения экрана:

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

Во-первых, посчитайте ваш модальный колонтитул и высоту нижнего колонтитула, в моем случае у меня есть заголовок H4, так что я имею их в 141px, уже посчитал модальное поле по умолчанию в 20px(top+bottom).

Так что вычитание 141px - это max-height для моей модальной высоты, для лучшего результата есть верхняя и нижняя границы с 1px, для этого 143px будет работать отлично.

В некоторых случаях стилизации вы можете использовать overflow-y: auto; вместо overflow-y: scroll;, попробуйте.

Попробуйте, и вы получите наилучший результат как на компьютере, так и на мобильном устройстве .. Если у вас заголовок больше, чем H4, пересчитайте его, чтобы увидеть, сколько px вы хотели бы вычесть.

Если вы не знаете, о чем я говорю, просто измените номер 143px, посмотрите, каков наилучший результат для вашего случая.

Наконец, я бы предложил использовать встроенный CSS.

6
bard

Вы, без сомнения, уже решили это или решили сделать что-то другое, но так как на него не было ответа, и я наткнулся на это, когда искал что-то похожее, я решил поделиться своим методом.

Я привык использовать два набора div. Один из них имеет hidden-xs и предназначен для просмотра на устройствах sm, md & lg. Другой имеет hidden-sm, -md, -lg и предназначен только для мобильных устройств. Теперь у меня намного больше контроля над отображением в моем CSS.

Вы можете увидеть грубую идею в этом js fiddle , где я установил нижний колонтитул и кнопки, чтобы они были меньше, когда разрешение имеет размер -xs.

  <div class="modal-footer">
      <div class="hidden-xs">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      <div class="hidden-sm hidden-md hidden-lg sml-footer">
    <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-xs btn-primary">Save changes</button>
      </div>
  </div>
3
VictorySaber

Решение scss для Bootstrap 4.0

.modal { max-height: 100vh; .modal-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } }

Убедитесь, что .modalmax-height это 100vh. Затем для .modal-body используйте функцию calc() для вычисления желаемой высоты. В приведенном выше случае мы хотим занять 80vh области просмотра, уменьшенную на размер заголовка + нижнего колонтитула в пикселях. Это около 140px вместе, но вы можете легко измерить его и применить свои собственные значения. Для меньших/более высоких модальных размеров измените 80vh соответственно.

0
lokers