div height for only space remaining

I want to place a scrollable div in a parent div which has absolute positioning.  The parent div has content which takes up a variable amount of space before the child div.  When I set height: 100%, the child div overflows the parent div.  What I want is for the child div to consume the *remaining* room in the parent div after the content in the parent div.  The end result should be the child scrollable div consuming all the room in the parent div (without overflowing) minus the title area at the top. I'm targeting both IE and Firefox for this solution.  Below is sample html:

<html>
<head>
<style>
div#parent {
    position:absolute;
    width: 100;
    height: 100;
    border: 1px solid #333;
}
div#parent span#title {
    font-weight: bold;
}
div#child {
    height: 100%;
    overflow: auto;
    border: 1px dotted red;
}
</style>
</head>
<body>

<div id="parent">
    <span id="title">test</span>
    <div id="child">
        one<br/>
        two<br/>
        three<br/>
        four<br/>
        five<br/>
        six<br/>
        seven<br/>
        eight<br/>
        nine<br/>
    </div>
</div>

</body>
</html>
phasevarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

neesterCommented:
>> The parent div has content which takes up a variable amount of space before the child div.
>> When I set height: 100%, the child div overflows the parent div.
>> What I want is for the child div to consume the *remaining* room in the parent div after the content in the parent div.

So Basically...

You want a parent div, say height: 200px.
With say content of 150px. (this can be variable - but for now, 150px)
Then the child div SHOULD stretch to become 50px in height.

I will make up a page with a script showing this in a second.

Cheers
0
phasevarAuthor Commented:
Basically, yes.
0
neesterCommented:
Ok champ.
I am heading out now - sorry - when I get back I will whip it up.
It is mainly HTML and CSS...
But yeah, i will post a demonstration page and post the code here too.

Cheers champ!
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

neesterCommented:
Hey champ!

Ok, got a little example going for you.

http://neester.com/article_15.html

I used HTML, CSS and Javascript.

Here are two examples:

http://neester.com/file_21.html
http://neester.com/file_22.html

The first you need to click before it resizes.
The second example will auto resize three boxes for you.

The code for the files is as follows:
==file_21.html==
<html>
<head>
     <title>Q_21683018</title>
<style>
   html {padding: 5em 0; text-align: center;}
   #parentBox {height: 300px; width: 500px; overflow: auto; border: 2px solid #000; margin: 0 auto;}
   #contentBox {background: #FCC;}
   #childBox {background: #CCF; width: 500px;}
   .faux_button {cursor: pointer; color: #00F; text-decoration: underline; font-weight: bold;}
</style>
</head>
<body>

<div id="parentBox">
<div id="contentBox">
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     <span class="faux_button" onclick="resizeChild();">Resize Child Now</span>
</div>
<div id="childBox">
     &nbsp;
</div>
</div>

<script>
//
// Resize the Child Div based on the height of the Content Div and the Parent Div.
//
function resizeChild() {
  var pBox = document.getElementById('parentBox');
  var cBox = document.getElementById('contentBox');
  var kBox = document.getElementById('childBox');

  if (cBox.offsetHeight < 300) {
     kBox.style.height = 300 - cBox.offsetHeight;
  }else{
     kBox.style.display='none';
  }
}
</script>

</body>
</html>



==file_22.html==
<html>
<head>
     <title>Q_21683018</title>
<style>
   html {padding: 5em 0; text-align: center;}
   .parentBox {height: 300px; width: 500px; overflow: auto; border: 2px solid #000; margin: 1em auto 3em auto;}
   .contentBox {background: #FCC;}
   .childBox {background: #CCF; width: 500px;}
</style>
</head>
<body>

<div id="parentBox1" class="parentBox">
<div id="contentBox1" class="contentBox">
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
</div>
<div id="childBox1" class="childBox">
     &nbsp;
</div>
</div>

<div id="parentBox2" class="parentBox">
<div id="contentBox2" class="contentBox">
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
</div>
<div id="childBox2" class="childBox">
     &nbsp;
</div>
</div>


<div id="parentBox3" class="parentBox">
<div id="contentBox3" class="contentBox">
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
     CONTENT<br />
</div>
<div id="childBox3" class="childBox">
     &nbsp;
</div>
</div>

<script>
//
// Resize the Child Div based on the height of the Content Div and the Parent Div.
//
function resizeChild(intBoxSet) {
  var pBox = document.getElementById('parentBox' + intBoxSet);
  var cBox = document.getElementById('contentBox' + intBoxSet);
  var kBox = document.getElementById('childBox' + intBoxSet);

  if (cBox.offsetHeight < 300) {
     kBox.style.height = 300 - cBox.offsetHeight;
  }else{
     kBox.style.display='none';
  }
}

resizeChild(1);
resizeChild(2);
resizeChild(3);
</script>

</body>
</html>
0
ljo8877Commented:
Try this:

#parentBox {
           position: absolute;  /* or relative  if that fits your design */
           height: 300px;
           width: 500px;
           overflow: auto;
           border: 2px solid #000; margin: 0 auto;
}
#childBox {
          position: absolute; /* is positioned within the containing positioned parent block */
          top: auto; /* where it would be in not positioned  in FF and others */
          top: position-static; /* IE equivalent to auto */
          bottom: 0px;     /* Pulls box to bottom in FF */
          height: expression(this.parentElement.height - (this.offsetHeight + this.clientTop) ); /* sizes for IE */
          background: #CCF;
}
0
phasevarAuthor Commented:
ljo8877, looks like you have the overflow:auto in the parent, not the child.  I'm fiddling with your concept a little but I haven't been able to make it work.  My intent is to have the child be scrollable and contained within the boundaries of the parent while consuming all height remaining in the parent after existing content in the parent.
0
phasevarAuthor Commented:
neester, if I add content at the beginning of parentBox3 then parentBox3 ends up with scrollbars instead of contentBox3 having the scrollbars.  I'm sure it can be done with javascript, however, my intent in posting it in the css group was to get a css based solution.
0
neesterCommented:
You will require javascript no matter what, ljo8877's solution has javascript:

height: expression(this.parentElement.height - (this.offsetHeight + this.clientTop) ); /* sizes for IE */

^^ that is a javascript expression.
If javascript is disabled, that line wont work.
0
neesterCommented:
But yeah, i will have a play around too, see if I can fix it up - didn't understand ur requirements completely before.

Cheers
0
neesterCommented:
I tried something out...
http://www.neester.com/file_25.html

You MUST set the height on both inner Divs, if you dont want a scroll bar in the PARENT div (they will expand to be too long otherwise - and not have a scroll bar.)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ljo8877Commented:
Well, that was just silly of me. The parent overflow, of course, should be hidden and the child overflow should be scroll.

I was just focusing on sizing and positioning
0
phasevarAuthor Commented:
neester,

Yes, if you set the height of the child div explicitly then it scrolls.  My goal was to have parent div with variable sized content at top, then child div which consumed all remaining area of parent div while using scroll bars to display content in child div.  The size of the parent div can change and the size of the parent content can change so the size of the child div needs to be dynamic if it is always going to use the remaining room in the parent div.

It seems like such a simple thing.  Tables can do this already, however, I can't make a table cell scrollable.

I could use javascript functions to make it happen but I like to keep my code as simple as possible so that maintaining it is easier and faster.

I realize the expression is javascript as well, but at least it's simpler than putting together a function and attaching said function to event handlers.  In the end, I fear that's exactly what I'll have to do, but I figured I'd give the css wizards around here a chance to show me a better way.
0
phasevarAuthor Commented:
ljo8877,

Did you test under FireFox?  Because I haven't been able to make your suggestions work with FireFox 1.5.
0
ljo8877Commented:
I just tested under FireFox and found it didn't work as promised.

Without Javascript, I doubt you'll find a cross platform method. And as neester pointed out the use of the express method in IE (dynamic properties) is really javascript in embeded in CSS.

0
phasevarAuthor Commented:
Thanks for the help!
0
neesterCommented:
No worries Phasevar...
I still dont see what you mean...

You want a dynamic cell, with two cells inside, both also being dynamic...

Why do you need the scroll bar?

Thnx for the points, sorry we couldn't nail that one.
0
phasevarAuthor Commented:
neester,

If you look at my original post you'll see div#parent is position:absolute with fixed height and width.  div#parent has content, span#title and div#child.  div#child is where I want the scrolling content.  If div#parent did not have span#title then I could simple give div#child a height:100% and it would assume the height of the parent and overflow:auto would create the scrolling area.  However, with span#title in there div#child cannot be height:100% of div#parent because span#title takes up a portion of div#parent's space.  So the exercise is to figure out how to get div#child to be the height of div#parent minus the height of span#title.

I need the scroll bar because there is more content to be displayed than will fit in the allotted space for div#parent.  That part is easy, overflow:auto.  Setting the height of div#child is the hard part.

This is for a dynamic web application utilizing ajax.  So I already have a lot of javascript code in there and I'm just trying to keep additional code to a minimum.  This seems like a simple matter and I'm surprised I can't get it done with CSS.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.