html - 覆盖有限滚动的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。