滚动有限的div覆盖div

Question

我需要创建一个叠加div，它不允许用户点击任何页面元素，但在叠加div中。问题是在使用横向的移动设备上，overlay div需要滚动。

如何启用仅在叠加div内容底部滚动？我的意思是，如果页面内容高度大于叠加div内容，则应启用滚动但不应将叠加div固定在顶部。

以下是我需要的样本：

.modal-dialog {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: absolute;
margin: 0;
padding: 0;
}
.modal-content {
background: url('http://dreamatico.com/data_images/mountain/mountain-2.jpg');
height: 90%;
}

<div>Lorem ipsum...</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>

以下是 JsFiddle 的示例。

更新

我已将示例代码更改为更简单。要运行场景，我提到您需要在横向模式下在智能手机上打开JsFiddle或在Chrome上打开设备模拟​​，在横向模式下选择iPhone 4。

Answer 1

给予DIV_1和DIV_2基于百分比的width和height。

Answer 2

要完全隐藏背景，请将包装器div放在：

position:fixed;
left:0;
right:0;
top:0;
bottom:0;

要设置＃DIV_2中心，您有多种选择，请尝试margin: auto

fiddle