如何让一个textarea占据div中的剩余高度？ [英] How can I have a textarea take up the remaining height in a div?

问题描述

我有一组代码如下。关键是要在div中有一组图像，div的其余部分用textarea填充。如果我设置height = 100％，它将使它的高度相同，这不是（div.height - images.height），并使textarea更长。

它在w3c上说， inherit 暂时不起作用， auto 只会创建一个默认textarea，

你们做了什么来做到这一点？

 < div id =parent> 
< div id =imagesstyle =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。

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

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

因此 textarea {position：absolute;

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

直播演示（仅适用于Google Chrome）： http://jsfiddle.net/atTK7 / 4 /

显示表格支持： http://www.quirksmode.org/css/display.html

建议使用浏览器的Javascript解决方法（Chrome除外）。

I have a set of code as per below. The point is to have a set of images be in the div, and the remainder of the div is populated with a textarea. If I set the height = 100%, it will make it the same height, which isn't the (div.height - images.height) and makes the textarea longer.

It says on w3c that inherit doesn't work at the moment, auto will just make a default textarea, and hardcoding it will never accomplish it as the div could be bigger or smaller.

What have you all done to accomplish this?

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

解决方案

Seems to be impossible to get this behavior work in other browsers than chrome.

I've tried to split the pictures and textarea in two CSS table-rows to give #images a height so that #textarea-container automatically adjust its height. The next step was to give textarea 100% height and 100% width.

Absolute positioning an element in a relative positioned table cell is not supported:
CSS Positioning inside of an HTML Table

So textarea { position: absolute; left:0;right:0;bottom:0;top:0 } in a relative positioned table cell will not work.

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%;
}

! This solution depends on display: table, display: table-row and Google Chrome.

Live demo (works only in google chrome): http://jsfiddle.net/atTK7/4/
Display table support: http://www.quirksmode.org/css/display.html

A Javascript workaround for browsers, except for chrome, is recommended.

这篇关于如何让一个textarea占据div中的剩余高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！