什么样式我需要应用到一个引导模态体有它填充模态内容的可用空间

Question

我尝试将modal-body的高度设置为100%和auto。设置为100%使模态体的高度与modal-content完全相同，这将modal-footer推到模态之外。

请参阅此JSFiddle以获取问题的演示。

给定一个可变高度的模态(基于vh)与固定高度的页眉和页脚，我想主体来填补其余的空间。

这可以用纯CSS完成吗?

Answer 1

我放弃了纯CSS解决方案。请参阅更新后的JSFiddle查看我的工作答案。

HTML:

<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>

Javascript:

$("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
    });
}

CSS:

@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;
}