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

问题

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>

回答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.

回答2:

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;).

回答3:

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/

回答4:

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>

来源：https://stackoverflow.com/questions/11000177/how-can-i-have-a-textarea-take-up-the-remaining-height-in-a-div

标签

html

css

image

styles

textarea