All geek questions in one place

Expand div from view center

I have a question before which I wanted to expand a div from the center of the body . It works fine until I come across this scenario in which the body content is long enough for the scroll bar to now display.

Notice this jsFiddle that when I scroll a little to the bottom or halfway, and then clicking anywhere on the page, the extended div is displayed at the very top of the page.

I know that 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 can I get the div to expand directly to the view port no matter where I scroll?

+5
source share
2 answers

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/

+6
source

you can try the following:

 .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

or

 .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 is my demo

UPDATED DEMO

+1
source

Source: https://habr.com/ru/post/1232772/

More articles:


All Articles