Link to home
Start Free TrialLog in
Avatar of Brad Bansner
Brad Bansner

asked on

Use CSS to create auto-scroll content area within fixed overlay element

This is the test page I am working on:
http://bbdesign.com/herbein.com/who-we-are.htm

After the page loads, the dark opaque background fades in (div#overlay), which is styled like this:

position:fixed;
top:130px;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);

Within that, I have a wrapper (div#contentblockwrap) styled like this:

position:relative;
width:980px;
max-width:90%;
height:100%;
margin:36px auto 0 auto;
overflow:auto;

I want div#overlay to fill the page underneath the white navigation bar, and div#contentblockwrap to sit 36px below that (as they do now), but the content within div#contentblockwrap should scroll inside it. It *sort of* works now, but I can't scroll to view all of the content (about the first three lines of the paragraph text only).

If there is a better way to do this, please let me know. Otherwise, is there a CSS tweak or two that would get this the way I want? It seems pretty close.

Thank you!
Avatar of Gary
Gary
Flag of Ireland image

Not sure I'm following you but why not remove position:fixed from div#overlay{}
Avatar of Brad Bansner
Brad Bansner

ASKER

I guess I could try it position:absolute? I do want to keep the navigation at the top from scrolling off the top of the browser window. I will mess around with it some more tomorrow.
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That's actually pretty darn close to what I want (you can see it in my sample URL above). However, do you know why I can't scroll all the way down? There is more paragraph content below there.

I am guessing the problem is a combination of these two things:

div#overlay{
top:130px;
height:100%;
}
I removed height:100% and made it position:absolute. Now it scrolls better, but the top navigation moves off the screen. I can probably fix that with some additional CSS on the top navigation.
Thanks for your help, I think I got a handle on it now.