nested div - overflow:auto help

I have two divs with one div nested inside the other.  When the content of the nested div fills the containing divs available space, I want the scrollbars to activate and allow the remaining content in the nested div to be able to be scrollable.

Here is the basic structure:

#parent {position:relative;height:65%;overflow:auto;}
#child {position:absolute;bottom:0;}

<div id="parent">
     <div id="child">
          <!--content goes here-->
     </div>
</div>

The closest I've come to a solution is using min-height and max-height on the child div like this:

#child {position:absolute;bottom:0;min-height:35%;max-height:65%;}

this semi-works in IE7& FF, but fails completely in IE6, Netscape and Opera.  I haven't tested Safari.

Thanks in advance for any help.
-Dman100-Software ConsultantAsked:
Who is Participating?
 
mreuringConnect With a Mentor Commented:
Well, an expression is something only IE supports (and mostly for good reasons others do not). It allows you to accually use javascript in a style-rule and thus generate dynamic values.

This particular expression is somewhat dangerous as by its' verry nature it might generate an endless loop.

What's happening is that IE will evaluate the expression whenever it re-renders the page. It will be evaluated within the scope of the element(s) the rule applies to and return the result as the value for the rule you apply it to. An expression may not contain newline characters and that somewhat increases the complexity of writing expressions. I will unwrap the suggested expression, by removing the shorthands I've aplied:
var treshhold = 25;
if (his.parentNode.offsetHeight <= this.offsetHeight + treshhold)) {
  return (this.parentNode.offsetHeight - treshhold) + "px";
} else {
  return "auto";
}

I hope this will make it possible for you to 'read' the expression! The danger in this expression lies in the effect of its' result. By passing back a fixed width IE will have to re-render part of the page, if this value causes the evaluation to return a different result IE will drop into an eternal loop, effectively dropping your browser into a deep coma...

Hope this info helps you further along,

 Martin
0
 
Mark StegglesWeb DeveloperCommented:
Hi Dman100,

You know that this is not working because the nested div is absolutely positioned and out of the flow? Is this a design requirement?

Steggs
0
 
mreuringCommented:
Hmm, I can cook something up that'll work on most, if not all, brand-new browsers. But, to do what you want, on IE6 and perhaps a few of the older ones, will require some nasty bit of scripting, I doubt it's worth the effort!
May I inquire as to what the reason for this solution is? Perhaps we can work around it to come up with someting that safer to implement?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
-Dman100-Software ConsultantAuthor Commented:
Hi Steggs and mreuring,

Thanks for replying to my post.

The absolutely positioned div, which is the child div is nested within a relatively positioned div (the parent), so I thought if an absolutely positioned div is inside a relatively positioned div it doesn't break out of the normal flow of the page?  Is that incorrect?

Here is the page that I'm trying to get this work on.  

http://www.dwayneepps.com/index.aspx

The basic structure has 4 divs all floated left, which breaks the layout into 4 quadrants (top left, top right, bottom left and bottom right).  The top left quadrant is 35% width and 65% height.  The top right quadrant is 65% width and 65% height.  The bottom left quadrant is 35% width and 35% height and the bottom right quadrant is 65% width and 35% height.

The content in the top left and top right quadrants have a nested divs that are absolutely positioned and set to bottom:0; inside the relatively positioned parent div, so it sits flush at the bottom.

I tested this in IE6, IE7, FF, Netscape and Opera and it all looks correct.  However, when you resize the browser window to a smaller size or view in a lower resolution, say, 800X600, the content in the top right quadrant isn't all viewable.  So, I was trying to set an overflow on the parent div so the scrollbar would activate when the content exceeded the parent height.

If there is another method or solution, that would be great.  I just need to keep the layout looking the same.

Does this make sense?

Thanks for your help.  I really appreciate it.
Regards.
0
 
mreuringCommented:
To be honest, I currently lack the abillity of tesing for IE (don't have a windows machine available) so all I can posibly provide is a suggestion.
The overflow on the parent is tricky, it depends on the browsers' interpretation on whether or not to count absolutely positioned content as an overflow (although it should). You might get away with moving the overflow to the child and setting the max-height of the child to 100%. However, this is where IE6 starts to become the anoying partner.
In the past I've been scripting a lot of expression to implement min/max width for IE, but I haven't been so bold as to make one for height yet, nor do I believe that a generic expression will fit all situations. This however _might_ do the trick for you:
* html #child {
  height: expression(((treshhold = 25) && (this.parentNode.offsetHeight <= this.offsetHeight + treshhold))?(this.parentNode.offsetHeight - treshhold) + "px":"auto");
}

where you should alter the treshhold value to whatever margin / padding you have. **Be warned** If the treshhold is too low you will crash your IE6 browser. And like I said, I cannot test this expression, it's a quick remake of a min/maxwidth expression I have made long time ago (href:Q_21186031.html)...

Good luck, I'll chime in if I can help further...

 Martin
0
 
-Dman100-Software ConsultantAuthor Commented:
Hi Martin,

Thanks for the info.  I have never used a style rule expression before.  To be honest, I didn't even know you could write an expression in a style rule.

So, being in the dark about this one, could you give a brief explanation of what is happening in that expression, and/or, point me to a article or tutorial on style rule expressions, so I can get some background understanding.

This looks interesting and very possibly the solution I will need to make this layout work.

Thanks for your help.
Regards.
0
 
-Dman100-Software ConsultantAuthor Commented:
Hi Martin,

Well, I tried placing the overflow:auto; on the child div with the max-height set to 100% and then I also added the style rule expression for IE, which it didn't crash IE by going into an infinite loop.

However, the overflow didn't activate in IE, FF, Netscape or Opera when I placed it on the child div?  Is this because of the absolute positioning?

Would there be another way to accomplish the same type of layout than the way I'm trying?
0
 
mreuringCommented:
Hmmm, I didn't test it on your site's layout, instead I used your original testcase and that worked fine in FF, Opera and Safari, the problem was I couldn't test for IE and therefor couldn't give you a working example.

But then I've also noticed that for FF it seems to already work on your website. So, let me mix up an example that works in all but IE6 and then if that seems to work for you also, test if the expression works on that as well...

Give me a bit of time to mix up the example :)
0
 
mreuringCommented:
Alright, got a little pressed with work, here a proof of concept:
<head>
<style type="text/css">
      html,body {
            margin: 0;
            padding: 0;
            height: 100%;
      }
      #parent {
            float: right;
            position:relative;
            width: 50em;
            height:65%;
            width: 65%;
            overflow:auto;
            background: red;
      }
      #child {
            width: 100%;
            position:absolute;
            bottom:0;
            background: yellow;
            max-height: 100%;
            overflow: auto;
      }
      * html #child {
              height: expression(((treshhold = 2) && (this.parentNode.offsetHeight <= this.offsetHeight + treshhold))?(this.parentNode.offsetHeight - treshhold) + "px":"auto");
      }
</style>
</head>
<body>
      <div id="parent">
            <div id="child">
                  <h3>Some content</h3>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
                  <a href="#dummy">Some link</a>
            </div>
      </div>
</body>

Also live available at: http://www.windgazer.nl/eexchange/Q_22743088.html

Truth be told, I might've forgot to mention that for IE you'd best get your #parent to have hasLayout and you must set a height for the parent.

Hope this will help you get things running!
0
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.

All Courses

From novice to tech pro — start learning today.