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!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Not sure I'm following you but why not remove position:fixed from div#overlay{}
0
Brad BansnerWeb DeveloperAuthor Commented:
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.
0
GaryCommented:
For #contentblockwrap {...} - remove overflow:auto

To div#overlay {...} - add overflow:auto
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Brad BansnerWeb DeveloperAuthor Commented:
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%;
}
0
Brad BansnerWeb DeveloperAuthor Commented:
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.
0
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for your help, I think I got a handle on it now.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.