Twitter bootstrap 我需要对引导模态体应用什么样式才能使其填充模态内容的可用空间？

我已尝试将

模态车身的高度设置为
100%
和
auto
。设置为
100%
会使模态体与
模态内容
的高度完全相同，从而将
模态页脚
推到模态外部

请参阅此演示以了解该问题

给定一个具有固定页眉和页脚高度的模式（基于vh）的可变高度，我希望主体填充剩余空间

这可以用纯CSS实现吗？我放弃了纯CSS解决方案。请参阅此更新以获取我的工作答案

HTML:

CSS:

“这可以用纯CSS实现吗？”我不这么认为。我也有同样的要求，我必须使用jQuery通过$（window）.height（）检测可用的高度，然后相应地计算和设置模态体高度。@PhilNicholas同意。见下面我的答案。
<button>show</button>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">header</div>
            <div class="modal-body">body</div>
            <div class="modal-footer">footer</div>
        </div>
    </div>
</div>

$("button").click(function () {
    $(".modal").modal("show");
});

$('.modal').on('shown.bs.modal', function () {
    resizeModal($(this));
});

$(window).resize(function () {
    resizeModal($(".modal"));
});

function resizeModal($modal) {
    var $modalDialog = $modal.find(".modal-dialog");
    var modalDialogTotalMargin = parseInt($modalDialog.css("margin-top")) + parseInt($modalDialog.css("margin-bottom"));
    var height = $(window).height() - modalDialogTotalMargin - $modalDialog.find(".modal-header").outerHeight(true) - $modalDialog.find(".modal-footer").outerHeight(true) - 1;
    $modalDialog.find(".modal-body").css({
        height: height
    });
}

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
 html, body {
    height: 100%;
    background-color: yellow;
}
.modal-dialog {
    /* basically full screen */
    margin: 50px auto;
    width: 90vw;
}
.modal-content {
    background-color: black;
}
.modal-header {
    background-color: red;
    height: 30px;
}
.modal-body {
    background-color: blue;
}
.modal-footer {
    background-color: green;
    height: 60px;
}