javascript - 弹出式 div，固定但太大时可滚动

Question

我想要一个从视口(viewport)顶部的固定位置弹出的 div，无论您在页面上的哪个位置。但是，当这个 div 有很多内容时，页面不会滚动。

所以:首先 div 在 View 之外，当单击按钮时它会滑入 View 。然后你可以滚动那个 div。但是整个页面都必须滚动，而不仅仅是在那个 div 内。

它在我使用“position: absolute”时有效，但随后它会从主体顶部而不是视口(viewport)弹出。

这是开始的简单 CSS:

div.overlay {
    width: 100%;
    position: fixed;
    min-height: 100%;
    background: red;
    margin-top: 50px;
    top: 100%;
    left: 0;
}

这是我的 JSFiddle:http://jsfiddle.net/uPmb4/

我希望你明白我要安排什么，但也许我的方法不是最好的开始方式。

Answer 1

那么如果红框内的内容太多，你想让红框和页面都单独滚动？

这个怎么样:

div.overlay {
    width: 100%;
    position: fixed;
    // I assume you want the red box to always be 50px from the top
    // no matter the viewport height?
    // This will make sure the bottom edge is at the bottom of the viewport
    // However, you shouldn't use calc if you need to support older browsers.
    height: calc(100% - 50px);
    // Make sure it scrolls if too much content
    overflow-y: auto;
    background: red;
    // No need for margin-top
    top: 50px;
    left: 0;
}

Fiddle