69

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 }

enter image description here

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

Firefox's rendering of the markup; the textarea does not fill the container.

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)?

Phrogz
  • 296,393
  • 112
  • 651
  • 745

5 Answers5

123

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.

Bart
  • 5,065
  • 1
  • 35
  • 43
Marc B
  • 356,200
  • 43
  • 426
  • 500
  • 1
    I appreciate your answer, but the need for padding is specifically why I did not use `width:100%` and mentioned it in both the title and question. (Nonetheless, this is a good answer that should remain on the site in case someone finding this question does not have exactly the same constraints as I have.) – Phrogz Jul 22 '11 at 21:00
  • 3
    Hrm...though perhaps I _could_ use this with [`box-sizing:border-box`](http://phrogz.net/CSS/boxsizing.html). Yes, [this works perfectly](http://jsfiddle.net/ZEhwR/1/). I'm going to give you the acceptance mark for the inspiration, thanks! I suggest that either you or I should edit your answer to mention using `box-sizing` and `-moz-box-sizing` for the fix. – Phrogz Jul 22 '11 at 21:04
  • Based on the amount of reputation you both have I'm guessing this is incorrect, but I also don't feel it merits it's own question. Why wouldn't overflow:hidden fix the right/bottom edge overflow? – Shane Chin Jul 22 '11 at 21:10
  • @shane chin: it'd hide the bottom/right overflow, but wouldn't fix the padding issue. OP wants an even amount of padding around the whole textarea, not just the top/left sides. – Marc B Jul 22 '11 at 21:11
  • @Shane `overflow:hidden` will prevent the textarea from obviously drawing outside the container, but you will not get consistent padding holding the text away from the container edge. For large amounts of padding and/or narrow containers, some of the text the user needs to edit may even become hidden outside the wrapper. – Phrogz Jul 22 '11 at 21:13
  • To my (pleasant) surprise, the box sizing model appears to working even in IE6 ... – Hanzaplastique Jun 10 '13 at 18:50
8

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

ShadyKiller
  • 700
  • 8
  • 16
2

This is a case where I highly recommend changing the markup (it wont even hurt the semantics):

HTML

<div id="wrap">
  <label class="textarea-label">
    <textarea></textarea>
  </label>
</div>

CSS

.textarea-label
{
  display: block;
  /* border, padding, and other styles go here,
  don't set the height, and don't use floats or positioning */
}

.textarea-label textarea
{
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

You should still be able to resize the textarea vertically without issues. If you use inline-block for the label, you should be able to resize horizontally as well.

The advantage of using the label is that clicking on the label will still focus the textarea as if you had clicked on the textarea. Additionally, using the descendant selector, you'll preserve your default textarea styles when you just need a plain-ol' textarea.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • 1
    Unfortunately, while a nice trick for focusing the textarea, the focus ring will now draw obviously inside the wrapper and right against the text being edited. – Phrogz Jul 22 '11 at 21:09
  • and for my next trick: if you *need* to have the outline show when focused, and *need* to have it work without javascript, set the textarea's padding identical to the `.textarea-label` and set the `textarea's` margin to the negative of the padding. It's a bit of a sham, but it should work alright. Typically I avoid making textareas fill their container, but it can be done. – zzzzBov Jul 22 '11 at 23:05
1

If the only problem your facing is the padding will be added to the 100% width and height, you may consider the box-sizing CSS3 property. here is an example

.box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  padding: 10px;
}

In this case the box will have a total width of 100px instead of 120px.

More about this property values check this link

Yacoub Oweis
  • 352
  • 4
  • 11
  • 1
    Note that only Firefox supports `padding-box`; for IE, Chrome, and Safari `border-box` is supported (and generally more useful) value. See [this (somewhat enigmatic) test page](http://phrogz.net/CSS/boxsizing.html). – Phrogz Jul 22 '11 at 21:31
0

you can use:

width: calc(100% - 20px)

replace "20px" with the padding you need, same with height.

dfralan
  • 1
  • 1