[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1301
  • Last Modified:

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!
0
bbdesign
Asked:
bbdesign
  • 4
  • 2
1 Solution
 
GaryCommented:
Not sure I'm following you but why not remove position:fixed from div#overlay{}
0
 
bbdesignAuthor 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
bbdesignAuthor 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
 
bbdesignAuthor 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
 
bbdesignAuthor Commented:
Thanks for your help, I think I got a handle on it now.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now