Textarea to fill a parent container exactly, with padding

Question

I want a <textarea> to completely fill an absolutely-sized parent container, with padding in the textarea. I have this working for Chrome using the following code:

<div id="wrap"><textarea>hello stack overflow world</textarea></div> 

/* 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 } 

Unfortunately, Firefox (v5) does not properly honor the right/bottom position, producing these results:

Here's a fiddle showing the problem in action: http://jsfiddle.net/ZEhwR/

How can I achieve the result stated in the first sentence across Chrome and FF (and ideally IE9 as well)?

Answer 1

Use width: 100%; height: 100%; to make the <textarea> fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.

Edit: To use width: 100%; along with padding, you can change the box sizing model:

    width: 100%;     height: 100%;      box-sizing: border-box; 

With this change, 100% now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.

Answer 2

I have a solution where you can have 100% width and height with padding in the text area. I use negative margins to achieve the desired effect.

HTML:

<div class="container">     <textarea class="text"/></textarea> </div> 

CSS:

.container{   padding: 10px   border: 1px solid silver }  .container .text{   resize: none;   outline: none;   width: 100%;   padding: 10px;   border: none;   height: 100%;   margin: -10px; } 

Tested this working on Google Chrome and Firefox