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.