Html text填充div中可用垂直空间的区域

有没有一种可靠的方法可以让textarea填充div中的可用空间

外部div具有固定的高度。 标题div具有动态内容。 body div包含一个textarea，应该填充外层div中的剩余空间。 这是迄今为止我得到的解决方案：

对于Chrome和Safari来说，这是一个可行的解决方案，但对于Firefox和更重要的InternetExplorer来说，效果并不理想。我希望支持IE8+

最好是不涉及任何JavaScript的解决方案

---

请注意，Gmail compose弹出窗口具有类似的行为，其中收件人标题可以增大，而消息正文文本区域则会缩小。

使用Javascript，使用JQuery的解决方案更简单

jQuery:$'textarea'.css{height:300-$'header'.height+'px'}

本地JS：

document.getElementsByTagName('textarea')[0].style.height = (300-document.getElementById('header').style.height)+'px'

为什么不想使用JavaScript

编辑： 我在玩你的JSBin，注意到如果你添加

height:100%;

---

对于主体样式，它为Firefox修复了它。验证在修复之后，您看到其他浏览器出现故障吗？

您的显示：表，表行方法是一个好主意

您只需确定表格行的比例。不需要浏览器干扰javascript，也不需要kitty牺牲插件

更改此项：

#header {
  background-color: #FFDDAA;
  display: table-row;
  height: 1%; /* this was 0, make it 1% */
}

仅在firefox的flash中测试。我不是在开发计算机上。如果有人能确认它适用于其他浏览器。必须是这样的：这是一张有两行的桌子，第一行的高度较低，另一行的高度较低

[后期编辑]

这已被证实在firefox中有效，但在IE10 IE8中无效。也许您需要将另一个类似表格行的单元格设置为99%:height，然后将文本区域定位为top:0；底部：0；或者类似的

---

这不是纯Javascript。。。您可能需要注意这是JqueryGood point。这是JQuery。我将添加一个只支持JS的解决方案，使用JavaScript进行布局通常会使事情更加复杂。对于标题内容的每次修改，都需要触发一个函数，该函数还需要再次计算textarea的高度。如果有几个地方修改了标题，事情很快就会变得一团糟。可以理解。这个问题困扰着我，所以我今天在玩你的JSBin，注意到如果你加上身高：100%；就身体风格而言，它似乎在Firefox中起作用。想法？值得注意的是，Gmail用户界面完全依赖Javascript；不要让你看到的任何东西让你认为这是一个只使用CSS的解决方案。确认它适用于Firefox、Chrome和Safari，文本区域的高度不正确。不过看起来body div的高度确实合适。也许这可以用来布局内部文本区域。有趣的是，它在IE9中可以工作，但在IE8中不行。也许我们确实需要一些JS，但只需要设置：setIntervalfunction{textarea.style.height=body.style.height}，100；尽管如此，我还是更喜欢无JS解决方案。多亏了你们，很遗憾，我无法在2007年1月假期前推动研究，但你们的评论起到了帮助作用。我发现textarea的行为与普通div不同，这很奇怪。我们可以检测到错误行为：如果$'body'。height！==$'textarea'.height{setIntervalfuncToCopyHeight，INTERVAL}，但是可以为INTERVAL设置什么值，这样用户就不会注意到，但同时又不是资源占用者。另一种解决方法是设置height，max height，overflow-y:auto；页眉的默认值与textarea的固定高度相结合。但前提是$'body'.height！=$'textarea'.height{$'outer'.addClass'fixed-height'}。不过，这将是一种务实的做法。