从视口中心展开div [英] Expand div from center of viewport

问题描述

我之前有一个问题想要从正文中心展开一个div 。它工作正常，直到我遇到这种情况，其中正文的内容足够长，滚动条现在显示。

请注意这个 jsFiddle ，当我滚动到一点点底部或只是一半，然后点击页面上的任何位置，展开的div显示在页面的最顶端。

我知道下面的CSS代码有一些事情要做与它：

  .growme {
 background-color：＃990000; 
 height：0; 
 width：0; 
位置：绝对; 
 filter：alpha（opacity = 0）; 
 opacity：0; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
 margin：auto; 
} 
  

无论在哪里，我怎样才能让div完全在视图端口处扩展我滚动？

解决方案

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

  .growme {
 background-color：＃990000; 
 height：0; 
 width：0; 
位置：固定; 
 filter：alpha（opacity = 0）; 
 opacity：0; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
 margin：auto; 
} 
  

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

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?

解决方案

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/

这篇关于从视口中心展开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！