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 can't set the max-height to 100% as that will be 100% of the entire document instead of the max height of the container, which is what i need for scrolling to work properly.
2. If there is a div with a fixed height inside the modal body at the very end, it will overflow outside of the modal if the screen is not big enough for the content.

How would I fix this? I'm currently experimenting with negative margins but i'm not too familiar with it.

JavaScript solutions are acceptable (jQuery is available as is backbone.js)

Thanks

Edit: Screenshot provided

Edit 2: More screenshot

Answer 1

I caved in and wrote coffeescript to fix this. If anyone's interested, here's the 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")))

Or the equivalent javascript as generated per above.

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

Answer 2

I faced the same problem with a long form. Javascript was not an option for me, so I ended up with a fully HTML-CSS solution.

The main goal was to code it just working with percentages, in order to have an easy way to build the media queries.

I've tested it with Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 and IE8. Here's the demo.

Modal HTML Structure:

The key is to have the structural divs clean from padding/margin/border. All these styles should be applied to the items inside them.

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

Styles:

The styles applied to these structure divs are the ones which determines its size.

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

For more detailed code, refer to the demo, where you'll see whole styling classes and those bootstrap styles which needs to be disabled/overriden.