Question

Setting my textarea’s css style bottom: 5px; will not work as expected, means will not change it’s height.. like would do in chrome.

Answer 1

Assuming that you’re talking about something like this: http://jsfiddle.net/thirtydot/44pwh/

<div style="position:relative; width:360px; height:180px">
    <textarea style="position:absolute; top:0; left:0; right:0; bottom:0"></textarea>
</div>

..there’s no way to make it work in IE9.

In fact, it only works in WebKit browsers.

It’s probably something to do with textarea being a replaced element, and WebKit handling it differently to other layout engines.

---

As a workaround, you can apply top/right/bottom/left to a wrapper div, then add the textarea inside that div. Then, add this:

textarea {
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/thirtydot/44pwh/1/

box-sizing: border-box is to make the textarea fit perfectly – without it, the default padding/border would make the textarea slightly larger than ideal.