Bootstrap modal body max height 100%

Question

I have a custom sized (80% height width) bootstrap modal body and it scrolls (body content will overflow on some sized screens)

There are 2 problems:

1. I

Answer 1

Pwnna's answer have good concept, bud doesn't work for me. Here is solution that work's for me:

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);

It's depend's on css:

.modal-body {
    overflow-y: auto; 
}

Answer 2

As a follow up to pwnna's answer this code is working better for me as it's working with a variable height depending on the content size with a max-height as well and it runs on load too, instead of just resize.

//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"));
});

Answer 3

try this Bootstrap Modal v2.1

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

Answer 4

Make the html and body elements fill the window:

html, body { height: 100%; }

Now you can use max-height: 100% on the element inside body, and it will be 100% of the window as the body element now is the size of the window.