Here is what I have:
<div id="modal-container">
<div id="modal-body"></div>
<div id="modal-footer"></div>
</div>
I am currently working on a JavaScript function to adjust the height of #modal-body to fill in the remaining available space. This task is proving to be more complex than anticipated:
$('#modal-body').css({
'height': function() {
// amount of vertical space available.
// containerHeight represents the height of the modalView container
var containerHeight = $('#modal-container').height();
// height taken up by the footer
var footerOuterHeight = $('#modal-footer').outerHeight();
// accounting for padding, margins and borders of the div
var paddingTop = $(this).css('padding-top').replace('px', '');
var paddingBottom = $(this).css('padding-bottom').replace('px', '');
var marginTop = $(this).css('margin-top').replace('px', '');
var marginBottom = $(this).css('margin-bottom').replace('px', '');
var borderTop = $(this).css('border-top-width').replace('px', '');
var borderBottom = $(this).css('border-bottom-width').replace('px', '');
return containerHeight - footerOuterHeight - paddingTop - paddingBottom - marginTop - marginBottom - borderTop - borderBottom;
}
});
The issue arises from the inability to directly set an "outerHeight" property for #modal-body, requiring us to calculate it by considering its padding, border, margin, etc.
In any case, the above function is mostly effective. Here are my two questions:
- Is there a simpler or more efficient way to achieve this?
- There seems to be a 1px discrepancy. The presence of a scrollbar in #modal-container suggests this. When deducting an additional 1px, it functions correctly. What might I be overlooking? Are there other factors aside from padding, margin, and border that should be considered?