如何让文本区域占据 div 中的剩余高度？

我有一组代码如下。要点是在 div 中放置一组图像，然后用文本区域填充 div 的其余部分。如果我设置 height = 100%，它将使其高度相同，这不是 (div.height - images.height) 并使文本区域更长。

w3c 上说的是inherit目前不起作用，auto只会创建一个默认的文本区域，并且硬编码它永远不会完成它，因为 div 可能更大或更小。

为了实现这个目标你们都做了什么？

<div id = "parent">
  <div id = "images" style="background-color:#99ccff;">
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
  </div>
  <textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" >
  </textarea>
</div>

似乎不可能让这种行为在除 Chrome 之外的其他浏览器中工作。

我尝试将图片和文本区域拆分为两个 CSS 表行以给出#images一个高度使得#textarea-container自动调整其高度。下一步是给文本区域 100% 的高度和 100% 的宽度。

不支持在相对定位的表格单元格中绝对定位元素:
HTML 表格内的 CSS 定位 https://stackoverflow.com/questions/1280115/css-positioning-inside-of-an-html-table

So textarea { position: absolute; left:0;right:0;bottom:0;top:0 }在相对定位的表格单元中将不起作用。

HTML

<div id ="parent">
    <div id="images">
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
    </div>

    <div id="textarea-container">
        <textarea></textarea>    
    </div>    
</div>​

CSS

* { margin:0; padding: 0 }

#parent{
    width: 400px;
    height: 300px;
    display: table;
    background: blue;
}
#images {
    display: table-row;
    height: 0;
}

#textarea-container {
    display: table-row;
}

textarea {
    height: 100%;
    width: 100%;
}

!该解决方案取决于display: table, display: table-row和谷歌浏览器。

现场演示（仅适用于 google chrome）: http://jsfiddle.net/atTK7/4/ http://jsfiddle.net/atTK7/4/
显示表支持: http://www.quirksmode.org/css/display.html http://www.quirksmode.org/css/display.html

建议使用适用于除 Chrome 之外的浏览器的 Javascript 解决方法。