Joachim Sauer 0

Hy,

I've been avoiding HTML and CSS as much as possible but need to tweak some designs now, so I'm forced to get into it and learn all about it.

Now I have what I think is a rather easy requirement and can't seem to find a solution for this.

I have three divs like this:

<div id="container">
  <div id="child1">some content</div>
  <div id="child2">some more content, dynamically generated, possibly a lot of content</div>
<div>

And I'd like to specify the height for #container, let #child1 be as big as it needs be (i.e. let the browser decide the height based on the content) and let #child2 fill up the rest of the height. Additionally I'd like #child2 to have a scrollbar when its content gets to big (i.e. overflow: auto;).

From what I've found on the web and from what I heard from friends that's not easily possible with current browsers and I've only heard of JavaScript solutions that effectively calculate the "rest height" and assign it to #child2. I'd really like to avoid this kind of hack and honestly can't believe that this can't be done with CSS.

So my questions boil down to this:

  1. Is this requirement too complex? It seems rather straightforward to me.
  2. Can this be implemented in any way using CSS?
  3. If it can be implemented, does any current browser actually display it correctly?
  4. Are there any hacks/workarounds that can produce something similar?

Thanks.

1 answer

Foamcow 0
0
points

You would need to use Javascript to find out the height of #container and #child1 and then set the height of #child2.

To make this easy I would suggest using a library like jQuery to "do the math".

Something like

`$(function(){ var containerheight = $('#container').height(); var child1height = $('#child1').height();

var child2height = containerheight - child1height;

$('#child2').height(child2height);

})`

I have often found when someone wants something like this they are missing a trick somewhere and there is another way to achieve the visual appearance of what they are asking. An immediate example of this is the 'faux-column' method to simulate the visual appearance of columns with the same height.

Answered over 3 years ago by Foamcow
  • That's what I feared ... so this simple requirement really can't be fulfilled with pure CSS? — Joachim Sauer over 3 years ago