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

Question

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

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

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

- - 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:absolute和其他一些随机编辑。这应该让你继续。

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