从视口中心扩展div

Question

之前我有一个问题，想要实现从页面中央扩展div的效果，具体请参考此链接. 在正常情况下这种方式是有效的, 除非页面内容足够长导致出现了滚动条。

请注意此处示例, 当你向下滑动到页面底部或者一半时，点击页面任意位置，你会发现展开的div会显示在页面最顶端。

我知道这个CSS代码与此有关：

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

我该如何让div在视口中展开，无论我滚动到哪里？

- basagabi

Answer 1

只需将您的位置更改为固定位置（使用视口）：

.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/

- Goowik

---

没想到那个！哈！非常感谢 @Goowik - basagabi

Answer 2

你可以尝试这个：

你可以尝试这个：

.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

或者

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

这里是我的演示

演示已更新

- Ivin Raj

---

从这里看似乎有相同的问题 :) - nowhere

div仍然没有居中显示（如果我理解问题的话，这就是问题所在）。 - nowhere

我能理解，等一下先生 @nowhere - Ivin Raj

感谢您花时间查看 @ivin raj，尽管 Goowik 给出了正确的答案。 :) - basagabi

不确定为什么这个被点赞了，因为两个建议都没有解决问题。 - Hidden Hobbes

抱歉，@HiddenHobbes先生。 - Ivin Raj