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!
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!
Not sure I'm following you but why not remove position:fixed from div#overlay{}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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 am guessing the problem is a combination of these two things:
div#overlay{
top:130px;
height:100%;
}
ASKER
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.
ASKER
Thanks for your help, I think I got a handle on it now.