How can I have a textarea take up the remaining height in a div?

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>

How is the height of `#parent` defined? Can you make a http://jsfiddle.net/ demo that shows the problem? (you can use http://dummyimage.com/ for the images) — thirtydot, Jun 12 '12 at 16:04

score 0 · Answer 1 · edited Jun 13 '12 at 11:47

0

Maybe it is a problem with your browser. I just tried your code and seems to do what you wanted: http://jsfiddle.net/Rorok_89/DMdyY/1/

edited Jun 13 '12 at 11:47

thirtydot

224,678
48
389
349

answered Jun 12 '12 at 16:08

Rorok_89

365
1
9

I believe the OP wants the textarea on the same line as the images. – j08691 Jun 12 '12 at 16:12
not on the same line. I want it to fill the remaining content.... so like all the images would wrap and take up some total height, then as my comment above: I would have some sort of fill command which would take the remaining heigh and apply it to the textarea – Fallenreaper Jun 12 '12 at 17:36

score 0 · Answer 2 · answered Jun 12 '12 at 18:19

0

I'm not very good at using it, but you may wish to try display:box;. I have an example here that does what (i think) you want, but with the 'main bug' being that you can no longer re-size the textarea (but if that's not and issue, you can change resize:none;).

answered Jun 12 '12 at 18:19

Fewfre

1,461
3
19
32

Also, more on [Flex-Boxes](https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes) – Fewfre Jun 12 '12 at 18:24

score 0 · Accepted Answer · edited May 23 '17 at 12:22

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.

score -1 · Answer 4 · answered Jun 12 '12 at 16:04

Even if I don't know clearly what you want to do, you can use jQuery to help you to get the size of actual elements, and force your textarea to expand or reduce. This should help you:

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

The OP hasn't tagged with question with jQuery nor JavaScript. — j08691, Jun 12 '12 at 16:13
I do not want to use JS for this. I was hoping it was just something to do entirely with CSS.... like some sort of fill command... to fill the remaining height of the container with the textarea. — Fallenreaper, Jun 12 '12 at 17:34

How can I have a textarea take up the remaining height in a div?

4 Answers4

Linked