具有百分比高度和最小高度的模态

Question

我正在尝试创建一个高度为浏览器窗口高度百分比的模式对话框。模态框应该有一个最小高度，这样它就不会变得太小，并且应该随着窗口大小的调整而相应地增长/缩小/重新居中。 modal 有一个 header 和一个 footer，它们将 modal-body 内容夹在中间。

这是我到目前为止的想法。如果我垂直调整窗口大小，红色框会正确增长并保持居中。但是，内容区域和页脚似乎并没有一直填充到模态容器的底部（红色框）。

这是怎么回事，我该如何解决？

- - FIDDLE HERE - -

HTML：

<div class="modal">
    <div class="modal-header">Header</div>
    <div class="modal-body">
        [...words...]
    </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)
    })
});

Answer 1

有点搞砸了，但我结合了overflow:hidden、position:fixed、几个position:absolutes 和其他一些随机编辑。这应该能让你继续前进。

http://jsfiddle.net/d3Ym2/6/

Answer 2

我不太了解这个，但请看this update。

只需使用bottom:0 设置您的页脚并调整正文的高度。

Answer 3

您的内箱尺寸不正确。

我解释： 其中一个框设置为 50% ，其他 2 个设置为他们需要的。 50% 留给页眉和页脚。一次充足，一次不充足。

所以将这两个设置为 25%；

此外，您在 p 元素上具有默认边距，这将跳出框。

将高度和框大小设置为页眉和页脚将包含它们。
你的 CSS 重新访问了

* {
    font-family:Arial, sans-serif;
    font-size:12px;
}

.modal {
    border:1px solid red;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
    min-height:200px;
}

.modal-header, .modal-body, .modal-footer {
    padding:10px;
    height:25%;
    box-sizing: border-box
}

.modal-header, .modal-footer {
    background:#ccc;
    font-weight:bold;
    font-size:14px;

}

.modal-body {
    height:inherit;
    padding:1px;
    overflow:auto;
    line-height:1.75em;
}

注意，将最小高度设置为 .mobal 是个好主意 :)