Как установить div, чтобы заполнить оставшееся место, занятое элементом динамического размера

Question

У меня есть этот код:

<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>

Я хочу установить содержимое div, чтобы заполнить оставшееся пространство его родителя. Текст генерируется на стороне сервера и вызывает изменение высоты заголовка.

Вывод должен выглядеть следующим образом: ввод файла должен быть внизу содержимого с заполнением текста, оставшимся от содержимого. Сам контент заполняет оставшуюся часть тела, высота которого зависит от динамического текста.

Меня интересует только решение CSS, так как это легко сделать с помощью JS. Кроме того, только ширина и высота элемента Body могут быть жестко заданы.

EDIT: Некоторые уточнения:

1. Тело фиксированного размера

2. Заголовок имеет динамический размер, может быть любой высоты. Если его высота> # Body.height, остальная часть будет обрезана, а высота #Content будет равна 0. В качестве альтернативы, если это возможно, #Header может быть ограничен максимальной половиной #Body с обрезкой или прокруткой остальных. 1019 * Контент не нуждается в особых разъяснениях. Он содержит фиксированный ввод файла и динамически высоту текстовой области

Thx.

Answer 1

Я не могу понять, как такая базовая вещь, как привязка управления (или закрепление), не является чем-то, что вы можете сделать в CSS Язык, который используется для презентации, не имеющий фундаментальной вещи, просто безумен ...

Во всяком случае, вышеупомянутая вещь, вероятно, не может быть выполнена в CSS, так как элемент CSS не знает о других элементах. Или, может быть, но такое решение наверняка будет включать CSS-хаки.

Я остановился на JQuery LayoutManager Framework на данный момент.

Answer 2

вот тестовая страница с указанием HTML-кода:

http://programmingdrunk.com/test.htm

Я позволил себе добавить цветные рамки, чтобы увидеть, что происходит.

edit: теперь ссылка выше имеет решение. в Firefox это выглядит немного странно, не знаю, смогу ли я это исправить

изменить 2: Окончательное решение, как видно из приведенной выше ссылки, таково (дайте мне знать, если я неправильно прочитал вашу спецификацию)

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

Answer 3

Добавление float:left в #header приведет к тому, что #content заполнит оставшееся пространство, хотя я не уверен, как достичь области текста.

Answer 4

Ваш HTML делает действительно очень трудным делать то, что вы хотите. Кроме того, вы не сказали нам, что должно произойти, если содержание слишком велико, чтобы поместиться на одном экране.

Ваше описание звучит так, как будто вы хотите что-то вроде: http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/

Чтобы получить хорошие ответы, рассмотрите возможность изменения структуры html.

EDIT: Хорошо, то, что вы хотите, просто не выполнимо, если вы хотите, то есть вести себя. Если мы снимаем ограничения ie или no-js, то есть небольшой шанс сделать это с макетами в стиле таблицы. Но это действительно странная просьба, и вы должны очень серьезно подумать, почему вы вообще хотите это делать.