Question

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>

Answer 1

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.