title: Fluidly vertically expanding DIV or TEXTAREA
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>I've collected together parts of answers to similar questions but can't quite make it work:
  <a href="http://jsfiddle.net/wa5zU/" rel="nofollow">http://jsfiddle.net/wa5zU/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h2&gt;Some content of variable length / height to fill the top portion of the screen&lt;/h2&gt;
  
  &lt;p&gt;Either: 1) make the blue-bordered DIV expand fluidly to fill this gap or 2) make the textarea expand to achieve the same effect&lt;/p&gt;
  &lt;div class="vexpand"&gt;
      &lt;div&gt;One line of content related to the textarea that must be kept with the textarea&lt;/div&gt;
      &lt;textarea rows=5 cols=10&gt;I have heard that textareas need valid rows and cols attributes in order to respond correctly to height and width css&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This attempt is based on <code>position:absolute</code> and <code>bottom:0</code> 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 <code>top</code>.</p>
  
  <p>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 <code>div</code>.  Ideally I would prefer that content to stay above the textarea.</p>
  
  <p>Things I've tried / seen in related questions:</p>
  
  <ul>
  <li><code>position:absolute</code> and conflicting absolute position</li>
  <li>setting the <code>height</code> of <code>body</code> and <code>html</code> to 100% so that CSS can perform calculations</li>
  <li>using <code>height:auto</code> or <code>height:100%</code> on the wrapper div <code>.vexpand</code> or the <code>textarea</code></li>
  <li>setting the <code>cols</code> and <code>rows</code> attributes on the <code>textarea</code> so that it responds to <code>height</code> and <code>width</code></li>
  </ul>