我想显示一个模式对话框，但我正在努力将弹性布局与固定位置的对话框结合起来。页眉和页脚需要固定高度；内容部分有滚动条溢出。我在这里选择弹性布局的原因是标题可以隐藏或高度变化，在这种情况下我希望内容占据所有可用的高度。
但是，如果我有一个带有位置的模态对话框：相对（md-modal），一切都会完美。
一旦我更改为位置：固定在 md-modal 上，一切都会中断。我没有看到造成这种情况的根本原因。我在这里遇到了规格问题吗？
我将情况封装在 600/400 包装纸中，只是为了便于查看。
<html>
<head>
<style type="text/css">
html,
body {
height: 100%;
margin: 0
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: auto;
height: auto;
border:1px solid green;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-content {
position: relative;
color: #000;
background: #fff;
border-radius: 3px;
margin: 0 auto;
}
.md-effect-1 .md-content { …