• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 513
  • Last Modified:

Using CSS to add scrollbars to <div> placed inside fixed-position <div>

Test page:
http://partnersdesign.net/test

Click the "Partners Design, Inc." navigation button at the top. There are two <div>'s nested like this:

<div id="partnersdesignwrapper">
      <div id="partnersdesign" class="clearfix">
            ...content...
      </div>
</div>

Styled like this:

div#partnersdesignwrapper{display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin-top:4em;
	background-color:rgba(0,0,0,0.7);
	}
div#partnersdesign{position:relative;
	width:66em;
	margin:3em auto;
	padding:0 0 2em 0;
	background-color:rgba(255,255,255,0.9);
	color:#000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.9em;
	min-height:800px;
	height:auto !important;
	height:800px;
	}

Open in new window


Everything works exactly the way I want, except if you click the "Partners" sub-nav link, for example (and your browser window is not tall enough), no scrollbars appear at the right.

Is it possible to allow that <div> to have its content scroll, even though it is inside a position:fixed <div>? If you look at the page, you can see what the issue is... you can't read the content that is further down the page.

Thank you!
0
bbdesign
Asked:
bbdesign
1 Solution
 
GaryCommented:
That's because your whole page is very tall
You could add a fixed height to the div and use overflow:auto
That would give scrollbars, but it needs the fixed height
0
 
bbdesignAuthor Commented:
Perfect, thanks! I think I got it.
0

Featured Post

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.

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