How to set div to fill in remaining place taken by the dynamically sized element

Question

Hello.

I have this code:

<div id="body" style="height: 295px; width: 427px; position: absolute; top: 261px; left: 284px;">

   <div id="header">
        Some dynamic text<br/>
        Some dynamic text<br/>
   </div>

    <div id="Content"> 
        <textarea id="text" style="width: 100%"> </textarea>

        <input type="file" style="width: 100%">
    </div>

   <div>
</div>

I want to set content div to fill remaining space of its parent. The text is generated server side and it causes the height of the header to change.

The output should look like this: file input should be at the bottom of the content with text input filling remaining of the Content. Content itself fills remaining of the Body, which height is influenced by dynamic text.

I am interested only in CSS solution, as this is easy to do with JS. Also, only width and height of the Body div can be hardcoded.

EDIT: Some clarifications:

1. #Body is fixed size
2. #Header is dynamic size, can be of any height. If its height > #Body.height, the rest will be cropped and #Content height will be 0. Alternativelly, if possible, #Header could be limited to max half of the #Body with the rest cropped or scrollable.
3. #Content doesn't need any special clarification. It contains of fixed file input and dynamicly height textarea

Thx.

Answer 1

here is a test page showing the html in question:

http://programmingdrunk.com/test.htm

ive taken the liberty to adding colored borders to see what is going on.

edit: now the above link has a solution. it looks a bit strange in firefox, ill see if i can fix that

edit 2: final solution as can be seen in the link above is this (let me know if i misread your spec)

#text, #Content  {
    height:86%;
}

Answer 2

Your html makes it really really hard to do what you want. Also, you have not told us what should happen if the content is too high to fit one screen.

Your description makes it sound a bit like you'd want something like: http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/

In order to get good replies, please consider changing of the html structure.

EDIT: Okay, what you want is just not doable if you want ie to behave. If we drop ie or no-js limitations, then there is a small chance in doing this with table-style layouts. But this is really weird request and you should consider really hard why do you want to do it like this at all.

Answer 3

Adding float:left to #header will cause #content to fill remaining space, not sure how to achieve the text area though.

Answer 4

I can't understand how such a basic thing as control anchoring (or docking) is not something you can do in CSS. The language that is used for presentation not having fundamental thing is just insane...

Anyway, the above thing probably can not be done in CSS as CSS element is not aware of other elements. Or maybe it can, but such solution will certanly include CSS hacks.

I settled with JQuery LayoutManager framework for now.