Fluidly vertically expanding DIV or TEXTAREA

Question

I want a textarea to take up as much vertical space as possible without overlapping any other visual elements. Obviously different screens / devices are different heights so I need the solution to be fluid (I think that's the right term).

The other questions I've looked at don't involve textareas, instead using (child) DIVs whose content is already determined. I don't need the textarea to expand dynamically to fit it's content, I just want it to be as tall as possible but without obscuring any other elements.

I've collected together parts of answers to similar questions but can't quite make it work: http://jsfiddle.net/wa5zU/

CSS:

body, html {
    height:100%
}
p {
    text-align:justify
}
textarea {
    resize:vertical;
    height:auto;
    width:100%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.vexpand {
    border:1px solid blue
}
.vexpand {
    position:absolute;
    bottom:0;
    width:90%;
    height:auto
}

HTML:

<h2>Some content of variable length / height to fill the top portion of the screen</h2>

<p>Either: 1) make the blue-bordered DIV expand fluidly to fill this gap or 2) make the textarea expand to achieve the same effect</p>
<div class="vexpand">
    <div>One line of content related to the textarea that must be kept with the textarea</div>
    <textarea rows=5 cols=10>I have heard that textareas need valid rows and cols attributes in order to respond correctly to height and width css</textarea>
</div>

This attempt is based on position:absolute and bottom:0 assuming that the DIV can be expanded upwards. I did it this way because the content above the DIV/TEXTAREA is variable so couldn't find an elegant and robust way to measure from the top.

There is a line of content related to the textarea that must be kept with the textarea, hence encapsulating this content and the textarea in a div. Ideally I would prefer that content to stay above the textarea.

Things I've tried / seen in related questions:

• position:absolute and conflicting absolute position
• setting the height of body and html to 100% so that CSS can perform calculations
• using height:auto or height:100% on the wrapper div .vexpand or the textarea
• setting the cols and rows attributes on the textarea so that it responds to height and width

Answer 1

Is this what you want to do?

http://jsfiddle.net/wa5zU/2/

body, html {
    height:100%;
    margin: 0;
    padding: 0;
}
p {
    text-align:justify
}
*
{
   box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;   
}

textarea {
    resize:vertical;
    height: calc(100% - 20px) ;
    width:100%;      
}

.text-content
{
    height: 80%;
    overflow: auto;
    padding: 10px;
}

.editor
{
  height: 20%; 
  overflow: hidden;
  padding: 10px;
}