My goal is to design a modal dialog that adjusts its height based on a percentage of the browser window height. The modal should maintain a minimum height to ensure it doesn't become too small, and it should dynamically grow, shrink, and re-center as the window size changes. This modal includes a header and footer elements that sandwich the main content.
Although I have made progress in creating this modal, there seems to be an issue where the content area and footer do not extend all the way to the bottom of the modal container (represented by the red box).
I'm curious about what might be causing this issue and how I can resolve it. Any suggestions?
- - CHECK OUT THE FIDDLE HERE - -
HTML:
<div class="modal">
<div class="modal-header">Header</div>
<div class="modal-body">
[...content...]
</div>
<div class="modal-footer">Footer</div>
</div>
CSS:
.modal {
border:1px solid red;
width:600px;
position:absolute;
top:50%;
left:50%;
}
.modal-header, .modal-body, .modal-footer {
padding:10px;
}
.modal-header, .modal-footer {
background:#ccc;
font-weight:bold;
font-size:14px;
}
.modal-body {
height:inherit;
overflow:auto;
line-height:1.75em;
}
jQuery:
$(function() {
$('.modal').css('height','50%');
$('.modal').css( {
'margin-top': (-1*$('.modal').height()/2),
'margin-left': (-1*$('.modal').width()/2)
})
});
$(window).resize(function() {
$('.modal').css( {
'margin-top': (-1*$('.modal').height()/2),
'margin-left': (-1*$('.modal').width()/2)
})
});