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

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

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

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

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

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

Спасибо

Изменить: предоставлен снимок экрана

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

Ответы

Ответ 1

Я сбежал и написал 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"));
});

Ответ 2

Я столкнулся с той же проблемой с длинной формой. 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 width [100%] - dialog width [60%] ) / 2 */
}

/* media query for mobile devices */
@media ( max-width: 480px ) {
    .modal.dialog1 {
        height: 90%;
        left: 5%; /* ( window width [100%] - dialog 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 where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

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

Ответ 3

попробуйте Bootstrap Modal v2.1

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

Ответ 4

Вот полностью работающее решение 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

Ответ 5

В качестве продолжения ответа 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"));
});

Ответ 6

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

{
    bottom:0;
    top:0;
    left:0;
    right:0;

Ответ 7

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

html, body { height: 100%; }

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

Ответ 8

Ответ 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; 
}

Ответ 9

Этот код

//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, это сработало для меня!

Ответ 10

Вам просто нужно установить высоту модального всплывающего окна на его шоу, получить высоту экрана/окна и установить его на модальную высоту. (вы можете умножить его на 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);
});