如何让textarea占用div中的剩余高度？

Question

我有一组代码，如下所示。重点是有一组图像在div中，并且div的其余部分用textarea填充。如果我将height设置为100％，它将使其高度相同，而不是（div.height - images.height），并使textarea变长。

它在w3c上表示inherit目前不能正常工作，auto只会创建一个默认textarea，并且硬编码它将无法完成它，因为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> 

Answer 1

似乎无法使此行为在Chrome浏览器中运行。

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

绝对定位在相对定位表格单元的元件是不支持：
CSS Positioning inside of an HTML Table

所以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://www.quirksmode.org/css/display.html

一个JavaScript解决方法的浏览器，除了铬，值得推荐。

Answer 2

即使我不清楚你想做什么都知道，你可以使用jQuery来帮助你得到实际元素的大小，并迫使你的textarea的扩大或缩小。这应该可以帮到你：

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

Answer 3

也许这是你的浏览器有问题。我只是试过你的代码，似乎做你想做的事：http://jsfiddle.net/Rorok_89/DMdyY/1/

Answer 4

我不是很擅长使用它，但你不妨尝试显示：盒;。我有一个example here，它可以做你想做的（我认为），但是主要的错误是你不能再调整textarea的大小（但如果这不是问题，你可以改变resize：none;）。