Css 如何设置div来填充动态大小的元素所占据的剩余位置

我有以下代码：

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

一些动态文本

一些动态文本

我想将contentdiv设置为填充其父级的剩余空间。文本是在服务器端生成的，它会导致标题的高度发生变化

输出应如下所示：文件输入应位于内容的底部，文本输入填充剩余内容。内容本身填充正文的其余部分，其高度受动态文本的影响

我只对CSS解决方案感兴趣，因为使用JS很容易做到这一点。此外，只能对车身div的宽度和高度进行硬编码

编辑： 一些澄清：

身体是固定大小的

标题是动态大小，可以是任何高度。如果其高度>Body.height，则其余部分将被裁剪，#内容高度将为0。或者，如果可能的话，标题可以限制在正文的最大一半，其余部分可以裁剪或滚动。

内容不需要任何特别的澄清。它包含固定文件输入和动态高度文本区域

---

Thx.

这里是一个测试页面，显示了所讨论的html：

我冒昧地添加了彩色边框，看看是怎么回事

编辑：现在上面的链接有了解决方案。在firefox中它看起来有点奇怪，我会看看是否可以修复它

编辑2: 从上面的链接中可以看出，最终的解决方案是（如果我误读了您的规范，请告诉我）

---

你的html让你很难做你想做的事情。此外，您还没有告诉我们，如果内容太高，无法容纳一个屏幕，应该怎么做

你的描述听起来有点像你想要的：

<>为了获得好的回复，请考虑HTML结构的改变。 编辑：

---

好吧，如果你想表现的话，你想要的是不可行的。如果我们放弃ie或不使用js限制，那么使用表样式布局的可能性很小。但这确实是一个奇怪的请求，你应该认真考虑一下为什么你要这样做。

< P>添加代码>浮点：左< /代码>到*头将导致α内容填充剩余空间，但不知道如何实现文本区域。

< P>我无法理解控制锚定（或对接）这样一个基本的东西。在CSS中是无法做到的。用于表达没有基本内容的语言是疯狂的

无论如何，上述事情可能无法在CSS中完成，因为CSS元素不知道其他元素。或许可以，但这样的解决方案肯定会包括CSS黑客

---

现在我已经解决了。

如果你想让文本填满剩余的空间，你不应该使用textarea吗？嗯，textarea的问题是，如果你在IE中将其高度设置为%，它将调整其大小……但是如果页眉的高度是可变的，那么这种设计将扩展“正文”分区。这根本解决不了问题，如果收割台高度大于容器高度的14%，该怎么办？您的解决方案看起来很相似，但不是我想要的。在你的例子中，div并不是固定的，但正如凤凰城所说，它正在扩展。此外，textarea看起来也很固定。还有86%的thingie。另外，在IE中，我使用的是严格模式。Content div有固定的输入文件和文本控件，它们应该填充剩余的空间。如果Header div包含的文本太多，则内容高度应为0。如果您可以提供使用不同HTML标记执行相同操作的代码，我将不胜感激。我以前尝试过，但它没有做到。。。高度等于100%时，它会覆盖容器。不要对任何内容使用高度：100%，因为#内容是块级元素，它会填充空间，只有文本框不会。不，它不会填充div，我重试了！。怎么可能呢？它的形状基于其中的控件。

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