Textarea填充div中的可用垂直空间

Question

是否有一种可靠的方法让textarea填充div中的可用空间？

• #outer div有一个固定的高度。
• #header div具有动态内容。
• #body div包含textarea，应填充#outer div中的剩余空间。

这是我到目前为止的解决方案：http://jsbin.com/UqelOYi/9/watch?html,css,output

这适用于解决方案Chrome和Safari，但它不能很好地适用于Firefox和更重要的Internet Explorer。我期待支持IE8 +。

最优选的是不涉及任何JavaScript的解决方案。

请注意，Gmail撰写弹出窗口具有类似的行为，当邮件正文textarea缩小时，收件人标头的大小会增大。

Answer 1

使用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%;

到#body样式，它为Firefox修复了它。校验？在修复之后你看到它失败的任何其他浏览器？

Answer 2

你的显示：表，表行方法是个好主意。

您只需要修复表格行比例。 无需浏览器干扰javascript或kitty牺牲插件。

改变这个：

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

仅使用firefox进行快速测试。我不是开发电脑。如果有人可以确认它适用于其他浏览器。它必须是：它是一个有2行的表，第一行占用较小的高度，另一行占用其余的行。

[编辑后]

这已经被证实可以在firefox中使用，但不适用于IE10 IE8。也许您需要将其他表格行设置为99％：height，然后将文本区域设置为顶部：0;底部：0;或类似的东西。

See for yourself