Rozwiń div od środka rzutni

Question

Mam pytanie, przed którym chciałem expand a div from the center of the body. Działa to dobrze, dopóki nie napotkam tego scenariusza, w którym zawartość ciała jest wystarczająco długa, aby teraz pojawiał się pasek przewijania.

Zawiadomienie o tym jsFiddle, że po przewinięciu do trochę na dole lub tylko w połowie, a następnie kliknięciu w dowolnym miejscu na stronie, rozwinięty div jest wyświetlany na samej górze strony.

Znam ten kod CSS poniżej ma coś z tym zrobić:

.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; 
} 

Jak mogę sprawić, że div poszerzyć prawo dokładnie w porcie widoku, niezależnie od tego, gdzie przewijać?

Answer 1

Wystarczy zmienić swoją pozycję na stałe (który używa rzutnię):

.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; 
} 

Oto demo: http://jsfiddle.net/w5w8orvp/

Answer 2

można próbować ten jeden:

.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

lub

.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