Question

之前我有一个问题，我想expand a div from the center of the body。它工作正常，直到我遇到这种情况，其中身体的内容足够长，现在滚动条显示。

注意这个jsFiddle，当我滚动到一点点或者只是半路然后点击页面的任何地方时，展开的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正好在视口处扩展？

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

以下是演示：http://jsfiddle.net/w5w8orvp/

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

Here My Demo

DEMO UPDATED

从视口中心展开div

2 个答案: