问题:

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?

回答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/

回答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

.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

转载请标明出处:Expand div from center of viewport

文章来源: Expand div from center of viewport

标签

viewport

div