Solved

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

Posted on 2013-06-25
2
504 Views
Last Modified: 2013-06-25
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
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39276642
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
 

Author Comment

by:bbdesign
ID: 39276650
Perfect, thanks! I think I got it.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question