Expand div from center of viewport

Question

I have a question before wherein I wanted to expand a div from the center of the body. It works fine not until I encountered this scenario wherein the content of the body is long enough that a scroll bar now shows.

Notice on this jsFiddle that when I scroll to a little to the bottom or just halfway then clicked anywhere on the page, the expanded div is displayed at the very top of the page.

I know this CSS code below has something to do with it:

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

How could I make the div expand right exactly at the view port regardless of where I scroll?

Answer 1

Just change your position to fixed (which uses the viewport):

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: fixed;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

Here is a demo: http://jsfiddle.net/w5w8orvp/

Answer 2

you can try this one:

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;

    overflow:scroll;
}

DEMO FIDDLE

or

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;

}
p
{
    text-align:center;
}

Here My Demo

DEMO UPDATED