Bootstrap 3 - set height of modal window according to screen size

I am trying to create a kind of responsive megamenu using Bootstrap 3 modal dialog. I would like to set the width and height of the whole modal window to 80% of the viewport, while setting the modal-body to a max-height in order not to populate the whole screen on large viewports.

My HTML:

    <div class="modal fade">
    		<div class="modal-dialog modal-megamenu">
    			<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        				<h4 class="modal-title">Modal Mega Menu Test</h4>
        			</div>
        			<div class="modal-body">
    	      			<div class="row">
                        	<div class="col-md-3"></div>
                        	<div class="col-md-3"></div>
                        	<div class="col-md-3"></div>
                        	<div class="col-md-3"></div>
                        </div>
        			</div>
        		</div>
        			<div class="modal-footer">
        				<button type="button" data-dismiss="modal" class="btn btn-primary">close</button>
        			</div>
       		 </div>
    	</div>

My CSS:

.modal-megamenu {
	width:80%;
	height:80%;
}

.modal-body {
	max-height:500px;
	overflow:auto;
}

This works as intended for the width, but the "height" parameter doesn't give any result. Like that, the height of the modal window is always set to the max-height value. Does anybody have an idea of how to set the height dynamically according to the viewport height?

Pure CSS solution, using calc

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

200px may be adjusted in accordance to height of header & footer

Similar to Bass, I had to also set the overflow-y. That could actually be done in the CSS

$('#myModal').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
});

Try:

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('height',$( window ).height()*0.8);
});

To expand on Ryand's answer, if you're using Bootstrap.ui, this on your modal-instance will do the trick:

	modalInstance.rendered.then(function (result) {
	    $('.modal .modal-body').css('overflow-y', 'auto'); 
	    $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
	    $('.modal .modal-body').css('height', $(window).height() * 0.7);
	});

I assume you want to make modal use as much screen space as possible on phones. I've made a plugin to fix this UX problem of Bootstrap modals on mobile phones, you can check it out here - https://github.com/keaukraine/bootstrap-fs-modal

All you will need to do is to apply modal-fullscreen class and it will act similar to native screens of iOS/Android.

I am using jquery for this. I mad a function to set desired height to the modal(You can change that according to your requirement). Then I used Modal Shown event to call this function. Remember not to use $("#modal").show() rather use $("#modal").modal('show') otherwise shown.bs.modal will not be fired.

That all I have for this scenario.

var offset=250; //You can set offset accordingly based on your UI
function AdjustPopup() 
{
    $(".modal-body").css("height","auto");
    if ($(".modal-body:visible").height() > ($(window).height() - offset)) 
    {
        $(".modal-body:visible").css("height", ($(window).height() - offset));
    }
}
//Execute the function on every trigger on show() event.
$(document).ready(function(){
$('.modal').on('shown.bs.modal', function (e) {
        AdjustPopup();
    });
});
//Remember to show modal like this
$("#MyModal").modal('show');