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

По-видимому, модальная высота просмотра Bootstrap не реагирует. [образец можно найти здесь] ( http://getbootstrap.com/javascript/#modals ) Я бы хотел, чтобы моя модальная высота уменьшалась на основе выбора размера устройства пользователя. Как я могу достичь этого, не используя

overflow: hidden;

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

@media (min-width: 900px) {
    .my-dialog .modal-dialog {
        width: 900px;
        max-height: 750px;
        overflow: hidden;
    }
}

jquery,html,css,twitter-bootstrap-3,bootstrap-modal,

-1

Ответов: 1

1

Я не знаю , если вы когда - либо слышали о единицах длины CSS vh, vw, vmin, vmax. Они могут быть решением вашей проблемы.

Из <length> - CSS | MDN из сети разработчиков Mozilla:

  • 1vw = 1% от ширины окна просмотра.
  • 1vh = 1% от высоты окна просмотра.
  • 1vmin = 1% от минимального значения между высотой и шириной окна просмотра.
  • 1vmax = 1% от максимального значения между высотой и шириной окна просмотра.

В вашем случае то, что вы ищете, это устройство vh.

Однако вы можете проверить таблицу поддержки браузера для единиц просмотра .

JQuery, HTML, CSS, твиттер-самозагрузка-3, самозагрузки покадровы,
Похожие вопросы
Яндекс.Метрика