Popup div, fixed but scrollable when too big

Question

I want a div that pops up on a fixed position from the top of the viewport, wherever you are on the page. But, when this div has a lot of content, the page doesn't scroll.

So: first the div is out of view, when button is clicked it slides into view. And then you can scroll that div. But the whole page has to scroll, not just inside that div.

It works when I use 'position: absolute', but then it pops up from the top of the body instead of the viewport.

Here's the simple CSS to start with:

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

Here's my JSFiddle: http://jsfiddle.net/uPmb4/

I hope you get the idea what I'm trying to arrange, but maybe my approach isn't the best way to begin with.

Answer 1

So if there is too much content in the red box, you want both the red box and the page to scroll separately?

How about this:

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

Answer 2

Replacing "min-height" for "height", and adding "overflow:auto" seems to work:

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

Answer 3

min-height: 100%; and margin-top: 50px; are creating the problem. 50px of the content disappear beneath the current viewport. Place a wrapper inside the div.overlay and give that a margin-top: 50px;

Answer 4

Set all the overlay divs to have the movedown class and do not use top: 100% in the overlay. Then if you add overflow-y: auto you're all set.

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

Example: http://jsfiddle.net/uPmb4/10/