Установите боттап модальный рост тела в процентах

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

Вот пример

Не работает:

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

Работает:

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

Ответ 1

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

.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;
}

Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

Ответ 2

Вместо использования% единицы 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;
}

Ответ 3

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

Я использовал два набора div. Один из них скрыт-xs и предназначен для просмотра sm, md и lg. Другой - скрытый-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>

Ответ 4

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

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

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

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

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

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

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

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