title: Textarea to fill a parent container exactly, with padding
body: <p>I want a <code>&lt;textarea&gt;</code> to completely fill an absolutely-sized parent container, with padding in the textarea. I have this working for Chrome using the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrap"&gt;&lt;textarea&gt;hello stack overflow world&lt;/textarea&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>/* Color and border CSS omitted for simplicity */
  #wrap    { position:absolute; top:10%; left:20%; right:30%; bottom:60%      }
  textarea { position:absolute; top:0; left:0; right:0; bottom:0; padding:1em }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/lK9lS.png" alt="enter image description here"></p>
  
  <p>Unfortunately, Firefox (v5) does not properly honor the right/bottom position, producing these results:</p>
  
  <p><img src="https://i.stack.imgur.com/41rnq.png" alt="Firefox&#39;s rendering of the markup; the textarea does not fill the container."></p>
  
  <p>Here's a fiddle showing the problem in action: <a href="http://jsfiddle.net/ZEhwR/" rel="noreferrer">http://jsfiddle.net/ZEhwR/</a></p>
  
  <p>How can I achieve the result stated in the first sentence across Chrome and FF (and ideally IE9 as well)?</p>