Home/ Questions/Q 6172545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:24:49+00:00

I want a <textarea> to completely fill an absolutely-sized parent container, with padding in

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0