Bootstrap modal body max высота 100%

У меня есть нестандартный размер (80% по высоте) bootstrap modal body, и он прокручивает (содержимое тела будет переполняться на экранах определенного размера)

Есть 2 проблемы:

  1. Я не могу установить максимальную высоту до 100%, так как это будет 100% всего документа, а не максимальной высоты контейнера, что мне нужно для прокрутки для правильной работы.
  2. Если на самом конце есть div с фиксированной высотой внутри модального тела, он будет переполняться вне модальности, если экран недостаточно велик для содержимого.

Как я могу это исправить? В настоящее время я экспериментирую с отрицательными полями, но я не слишком хорошо знаком с этим.

Разрешения для JavaScript приемлемы (jQuery доступен как backbone.js)

благодаря

Изменить: снимок экрана

enter image description here

Изменить 2: Больше снимков экрана

enter image description here

12
Обновлено с изображением.
добавлено автор Pwnna, источник
Решается через код JavaScript вместо магии CSS.
добавлено автор Pwnna, источник
это очень сложно для нас вообразить, либо скрипку, либо ссылку или скриншот.
добавлено автор Hamed Al-Khabaz, источник
Можете ли вы опубликовать какой-то код или создать jsfiddle для нас?
добавлено автор Saju, источник

10 ответы

Я сбежал и написал coffeescript, чтобы исправить это. Если кому-то интересно, вот кофейни:

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

Или эквивалентный javascript, созданный в соответствии с приведенным выше.

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
8
добавлено
У меня также возникла соблазн использовать компоновку JS, но, поскольку я использую анимированные панели сворачивания в теле и нижнем колонтитуле, становится невероятным обновлять высоты в анимации с помощью JS.
добавлено автор Andy, источник
Это не сработало для меня.
добавлено автор oracleruiz, источник

Я столкнулся с той же проблемой с длинной формой. Javascript не был для меня вариантом, поэтому я получил полностью решение HTML-CSS.

Основная цель заключалась в том, чтобы кодировать его, просто работая с процентами, чтобы иметь простой способ для создания медиа-запросов.

Я тестировал его с помощью Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 и IE8. Вот демо .

Модальная структура HTML:

Ключ должен состоять в том, чтобы структурные divs были чистыми от padding/margin/border. Все эти стили должны применяться к элементам внутри них.

<div id="dialog" class="modal hide dialog1" aria-hidden="false">
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div>
        </div>
    </div>
</div>

Стили:

Стили, применяемые к этим структурным divs, являются теми, которые определяют его размер.

.modal.dialog1 { /* customized styles. this way you can have N dialogs, each one with its own size styles */
    width: 60%;
    height: 50%;
    left: 20%; /* ( window's width [100%] - dialog's width [60%] )/2 */
}

/* media query for mobile devices */
@media ( max-width: 480px ) {
    .modal.dialog1 {
        height: 90%;
        left: 5%; /* ( window's width [100%] - dialog's width [90%] )/2 */
        top: 5%;
        width: 90%;
    }
}

/* split the modal in two divs (header and body) with defined heights */
.modal .modal-header {
    height: 10%;
}

.modal .modal-body {
    height: 90%;
}

/* The div inside modal-body is the key; there's where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

Более подробный код приведен в демо , где вы увидите все классы стилей и стили бутстрапа, которые должны быть инвалидов/переопределенная.

6
добавлено

try this Bootstrap Modal v2.1

https://github.com/jschr/bootstrap-modal

4
добавлено
Это отличное решение. Он не только устраняет проблему с высотой, но и предоставляет множество других улучшений для модального бутстрапа.
добавлено автор Alex, источник
Он не работает с BS3
добавлено автор oracleruiz, источник
BS3 теперь имеет дополнительные размеры, «модальный-sm» и «modal-lg», которые используют вместо этого. Ссылка выше работает только для BS2
добавлено автор GianFS, источник

Вот полностью работающее решение Sass, но для требуется flexbox .

 //don't clamp modal height when screen is shorter than 400px
 //.modal-body is short in that case, and the default behavior
 //(entire modal will scroll) is easier to use
  @media(min-height:400px)
    .modal
     //use top/bottom margin here instead of .modal-dialog
     //so that .modal-dialog can use height: 100%
      margin: 30px
     //without overflow: visible the shadow will be clipped
     //at the bottom
      overflow: visible

      > .modal-dialog
        margin: 0 auto
       //height must be explicitly set for .modal-content to
       //use percentage max-height
        height: 100%

        > .modal-content
          display: flex
          flex-direction: column
          max-height: 100%

          > .modal-header,
          > .modal-footer,
           //don't allow header/footer to grow or shrink
            flex: 0 0 auto

          > .modal-body
           //allow body to shrink but not grow
            flex: 0 1 auto
           //make body scrollable instead of entire modal
            overflow-y: auto
2
добавлено

Вам просто нужно установить высоту модального всплывающего окна на его шоу, получить высоту экрана/окна и установить его на высоту модального. (вы можете умножить его на 0,8, чтобы получить высоту экрана высотой 80%, которая хорошо подходит).

$('#YourModalId').on('show.bs.modal', function() {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    var _height = $(window).height()*0.8;
    $('.modal .modal-body').css('max-height', _height);
});
2
добавлено

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

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
1
добавлено

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

{
    bottom:0;
    top:0;
    left:0;
    right:0;
0
добавлено
Обновлен с изображением, если некоторые из них необходимы
добавлено автор Pwnna, источник

Сделайте элементы html и body заполнить окно:

html, body { height: 100%; }

Теперь вы можете использовать max-height: 100% для элемента внутри тела, и он будет составлять 100% от окна, поскольку элемент <body> <body> теперь является размером окна ,

0
добавлено
Обновлен с изображением, если некоторые из них необходимы
добавлено автор Pwnna, источник
Да, я использую row-fluid и span6 , также мне нужно установить максимальную высоту на высоту модального минуса заголовка, а не окна, как сейчас ,
добавлено автор Pwnna, источник
@ultimatebuster: ваш переполнение, вероятно, является плавающим элементом, который не содержится в родительском элементе. Вы должны установить стиль overflow для родительского элемента, чтобы он содержал плавающих детей.
добавлено автор Guffa, источник
Почему нисходящий? Если вы не объясните, что это такое, что вы считаете неправильным, оно не может улучшить ответ.
добавлено автор Guffa, источник

Ответ Pwnna имеет хорошее понятие, бутон не работает для меня. Вот решение, которое работает для меня:

fit_modal_body = function (modal, padding) {
    var windowHeight = $(window).height();
    var modalHeight = modal.height();

    var dif = windowHeight - (modalHeight + 2*padding);
    var modalBody = $(".modal-body:first", modal);
    modalBody.css("max-height", modalBody.height() + dif);
};

resizeLastWindow = function() {
    fit_modal_body($(".modal-dialog:last"), 15);
};

$(window).resize(resizeLastWindow);

Это зависит от css:

.modal-body {
    overflow-y: auto; 
}
0
добавлено

Этот код

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

Написано tsdexter , это сработало для меня!

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)