How do I shrink the height of a div to accommodate more content?

Question

I have a layout that looks like this:

.-------------------.u
|#content           |u
'-------------------'u
.-------------------.u
|#menu              |u
'-------------------'u
.-------------------.u
|#morecontent       vu
|                   vu
|                   vu
'-------------------'u

u's represent the body scrollbar and v's the one created from #morecontent's overflow: auto property. I have #menu contain dynamic data so sometimes it takes more than one line but right now #morecontent is sized to fit only one. How can I make the height of #morecontent adjust itself so it doesn't cause the u scrollbar to be scrollable or "enabled". I guess when I have more than one line? I know I should be using %'s and I tried using max-height but it didn't really work the way I wanted...

Answer 1

Use position: fixed to make the layout more concrete and Javascript to resize the #morecontent div. There is no way to make it resize when the other div does with XHTML/CSS.

Answer 2

Make sure that your div uses only max-height and min-height. Do not use height. If you want its height to go forever, don't set anything.

Answer 3

Here comes some spoon feeding:
http://jsfiddle.net/9QNUG/

note: you did not say if the content above was dynamic, but i am assuming not from your description, you will need to play with the heights in the example to get them to match yours.