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

Question

我有一组以下代码。目的是将一组图像放入 div 中，剩余部分使用文本区域填充。如果我将高度设置为 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>

- Fallenreaper

---

#parent 的高度是如何定义的？你能否制作一个 http://jsfiddle.net/ 演示来展示这个问题？（你可以使用 http://dummyimage.com/ 来添加图片） - thirtydot

Answer 1

我不太擅长使用它，但你可以尝试使用display:box;。我有一个示例在这里，它可以做到（我认为）你想要的，但是主要问题是你不能再调整文本区域的大小（但如果这不是问题，你可以将resize:none;改为其他值）。

- Fewfre

---

此外，关于 Flex-Boxes 的更多内容。 - Fewfre

Answer 2

可能是浏览器的问题。我刚刚尝试了你的代码，看起来做到了你想要的：http://jsfiddle.net/Rorok_89/DMdyY/1/

- Rorok_89

---

我相信OP希望文本区域与图片处于同一行。 - j08691

我想让它填充剩余的内容...所以就像所有的图像都会换行并占用一些总高度，然后如上面的评论：我会有某种填充命令，它将取剩余的高度并将其应用于文本区域。 - Fallenreaper

Answer 3

似乎在除了Chrome之外的其他浏览器中无法使此行为正常工作。

我尝试将图片和文本区域分成两个CSS表格行，以给#images一个高度，以便#textarea-container自动调整其高度。下一步是给文本区域100％的高度和100％的宽度。

不支持在相对定位的表格单元格中绝对定位元素：
HTML表格内的CSS定位

因此，在相对定位的表格单元格中使用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 和谷歌浏览器。

演示（仅适用于谷歌浏览器）: http://jsfiddle.net/atTK7/4/
显示表支持: http://www.quirksmode.org/css/display.html

建议在浏览器中使用Javascript解决方法，除了谷歌浏览器。

- doptrois

Answer 4

即使我不清楚你想做什么，你可以使用jQuery来帮助你获取实际元素的大小并强制调整你的文本框的大小。这应该会对你有所帮助：

<script type="text/javascript">
var max_div_height = 1000; //The max height of your div in pixels
var total_div_height = 0 // The total height of your divs combined
jQuery(".container").each(function(){
    var context = $(this);
    var height = context.height();
    total_div_height+=height; //If it's width, set height otherwise
});
var textarea_size = max_div_height - total_div_height;
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea
</script>

- Jeff B.

---

该 OP 没有将问题标签为 jQuery 或 JavaScript。 - j08691

我不想使用JS来完成这个。我希望它完全是与CSS有关的东西...就像某种填充命令...用textarea填充容器的剩余高度。 - Fallenreaper