CODEWITHSUNDEEP
htmlcss
Berry Blue
Berry Blue

Reputation: 16482

Fixed fullscreen div over body with scroll bars

Is it possible to have a fixed fullscreen div position:fixed; width:100%; height:100%; cover the body of the page including the scroll bars?

I know I can just set the body to overflow:hidden; but the issue I'm having is that I want the fullscreen div to fade-in but changing the body's overflow changes the width of the fullscreen div as it fades in and out.

Here's a demo. You can see changing the overflow of the body changes the width of the fixed div. http://jsfiddle.net/bk63qejf/

Upvotes: 2

Views: 3353

Answers (2)

Berry Blue
Berry Blue

Reputation: 16482

Thanks for all the comments to my post. I was able to figure out a solution.

The answer is you need to make the scrollable content positioned fixed also using width:100%; height:100%; position:fixed; overflow:auto;.

http://jsfiddle.net/bk63qejf/2/

Upvotes: 1

w3shivers
w3shivers

Reputation: 400

If I understood your question correctly. You just have to add a position fixed to your body and html tags as well. See css code below:

html, body { margin:0; padding:0; width: 100%; height: 100%; position:fixed;}
#fullscreen{ position: fixed; width: 100%; height: 100%; background-color: gray; color:white; word-break: break-all; overflow:auto;}

Hope it helps :-)

Upvotes: 2

Related Questions