0

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

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

在此处输入图像描述

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

- - 在这里提琴 - -

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)
    })
});
4

3 回答 3

2

Kinda hacked-up，但我用overflow:hidden, position:fixed, 几个position:absolutes 和其他一些随机编辑的组合来做到这一点。这应该让你继续前进。

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

于 2013-06-03T20:03:27.950 回答
1

我不是很了解这个，但是看看这个更新。

只需设置您的页脚bottom:0并调整身体的高度。

于 2013-06-03T20:07:52.783 回答
0

您的内箱尺寸不正确。

我解释一下：其中一个框设置为 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 是个好主意 :)

于 2013-06-03T20:28:50.870 回答